packages/client/src/index.css

@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';
@import '@fontsource/plus-jakarta-sans/300.css';
@import '@fontsource/plus-jakarta-sans/400.css';
@import '@fontsource/plus-jakarta-sans/500.css';
@import '@fontsource/plus-jakarta-sans/600.css';
@import '@fontsource/plus-jakarta-sans/700.css';

/* Plus Jakarta Sans is bundled locally by Vite. */

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --animate-marquee: marquee 10s ease-in-out infinite;
}

/* ===== Soft Zinc palette — dark, subtle blue tint ===== */
:root {
  color-scheme: dark;
  --radius: 0.875rem;
  --background: #080b12;
  --foreground: #f7f1e8;
  --card: #141b27;
  --card-foreground: #f7f1e8;
  --popover: #172031;
  --popover-foreground: #f7f1e8;
  --primary: #e3b76c;
  --primary-foreground: #17110a;
  --secondary: #222c3a;
  --secondary-foreground: #f7f1e8;
  --muted: #1b2330;
  --muted-foreground: #a8a098;
  --accent: #2a3546;
  --accent-foreground: #f7f1e8;
  --destructive: #e76f73;
  --destructive-foreground: #fff7f7;
  --border: rgb(240 223 195 / 13%);
  --input: rgb(240 223 195 / 16%);
  --ring: #e3b76c;
  --chart-1: #e3b76c;
  --chart-2: #74b8a5;
  --chart-3: #e76f73;
  --chart-4: #76a7ff;
  --chart-5: #f3d79e;
  --sidebar: #111823;
  --sidebar-foreground: #f7f1e8;
  --sidebar-primary: #e3b76c;
  --sidebar-primary-foreground: #17110a;
  --sidebar-accent: #222c3a;
  --sidebar-accent-foreground: #f7f1e8;
  --sidebar-border: rgb(240 223 195 / 13%);
  --sidebar-ring: #e3b76c;
  --theme-accent-rgb: 227 183 108;
  --theme-highlight-rgb: 243 215 158;
  --theme-secondary-rgb: 116 184 165;
  --theme-border-rgb: 240 223 195;
}

:root[data-color-preset='ocean'] {
  --background: #071417;
  --foreground: #ecfbf8;
  --card: #102429;
  --card-foreground: #ecfbf8;
  --popover: #122a30;
  --popover-foreground: #ecfbf8;
  --primary: #62d0c1;
  --primary-foreground: #07201d;
  --secondary: #1b373d;
  --secondary-foreground: #e3f5f2;
  --muted: #152b30;
  --muted-foreground: #a0bab5;
  --accent: #1e454a;
  --accent-foreground: #ecfbf8;
  --border: rgb(184 244 235 / 14%);
  --input: rgb(184 244 235 / 17%);
  --ring: #62d0c1;
  --chart-1: #62d0c1;
  --chart-2: #8ab9ff;
  --chart-3: #f3b06d;
  --chart-4: #e88fba;
  --chart-5: #c3ef9d;
  --sidebar: #0d1e23;
  --sidebar-foreground: #ecfbf8;
  --sidebar-primary: #62d0c1;
  --sidebar-primary-foreground: #07201d;
  --sidebar-accent: #1b373d;
  --sidebar-accent-foreground: #ecfbf8;
  --sidebar-border: rgb(184 244 235 / 14%);
  --sidebar-ring: #62d0c1;
  --theme-accent-rgb: 98 208 193;
  --theme-highlight-rgb: 181 240 227;
  --theme-secondary-rgb: 138 185 255;
  --theme-border-rgb: 184 244 235;
}

:root[data-color-preset='rose'] {
  --background: #170c15;
  --foreground: #fff1f6;
  --card: #2a1523;
  --card-foreground: #fff1f6;
  --popover: #321827;
  --popover-foreground: #fff1f6;
  --primary: #f09aba;
  --primary-foreground: #2a0e1b;
  --secondary: #432032;
  --secondary-foreground: #fff1f6;
  --muted: #331a29;
  --muted-foreground: #c4a4b2;
  --accent: #54283d;
  --accent-foreground: #fff1f6;
  --border: rgb(255 211 228 / 14%);
  --input: rgb(255 211 228 / 17%);
  --ring: #f09aba;
  --chart-1: #f09aba;
  --chart-2: #92cfbe;
  --chart-3: #f4c176;
  --chart-4: #9db4ff;
  --chart-5: #d1a0ec;
  --sidebar: #21111d;
  --sidebar-foreground: #fff1f6;
  --sidebar-primary: #f09aba;
  --sidebar-primary-foreground: #2a0e1b;
  --sidebar-accent: #432032;
  --sidebar-accent-foreground: #fff1f6;
  --sidebar-border: rgb(255 211 228 / 14%);
  --sidebar-ring: #f09aba;
  --theme-accent-rgb: 240 154 186;
  --theme-highlight-rgb: 255 211 227;
  --theme-secondary-rgb: 146 207 190;
  --theme-border-rgb: 255 211 228;
}

:root[data-color-preset='violet'] {
  --background: #0f0b1b;
  --foreground: #f5f1ff;
  --card: #1e1830;
  --card-foreground: #f5f1ff;
  --popover: #261d3d;
  --popover-foreground: #f5f1ff;
  --primary: #bba7ff;
  --primary-foreground: #1d1337;
  --secondary: #31274d;
  --secondary-foreground: #f5f1ff;
  --muted: #28203d;
  --muted-foreground: #b7adc9;
  --accent: #41315f;
  --accent-foreground: #f5f1ff;
  --border: rgb(223 211 255 / 14%);
  --input: rgb(223 211 255 / 17%);
  --ring: #bba7ff;
  --chart-1: #bba7ff;
  --chart-2: #78cbb8;
  --chart-3: #f0a7b8;
  --chart-4: #8fb8ff;
  --chart-5: #efcc7f;
  --sidebar: #18122a;
  --sidebar-foreground: #f5f1ff;
  --sidebar-primary: #bba7ff;
  --sidebar-primary-foreground: #1d1337;
  --sidebar-accent: #31274d;
  --sidebar-accent-foreground: #f5f1ff;
  --sidebar-border: rgb(223 211 255 / 14%);
  --sidebar-ring: #bba7ff;
  --theme-accent-rgb: 187 167 255;
  --theme-highlight-rgb: 222 212 255;
  --theme-secondary-rgb: 120 203 184;
  --theme-border-rgb: 223 211 255;
}

:root[data-color-preset='sunset'] {
  --background: #1a0d0b;
  --foreground: #fff4ec;
  --card: #2c1818;
  --card-foreground: #fff4ec;
  --popover: #361c1a;
  --popover-foreground: #fff4ec;
  --primary: #ff9d68;
  --primary-foreground: #321308;
  --secondary: #4a2922;
  --secondary-foreground: #fff4ec;
  --muted: #351e1b;
  --muted-foreground: #c9aaa0;
  --accent: #613025;
  --accent-foreground: #fff4ec;
  --border: rgb(255 220 198 / 14%);
  --input: rgb(255 220 198 / 17%);
  --ring: #ff9d68;
  --sidebar: #241312;
  --sidebar-foreground: #fff4ec;
  --sidebar-primary: #ff9d68;
  --sidebar-primary-foreground: #321308;
  --sidebar-accent: #4a2922;
  --sidebar-accent-foreground: #fff4ec;
  --sidebar-border: rgb(255 220 198 / 14%);
  --sidebar-ring: #ff9d68;
  --theme-accent-rgb: 255 157 104;
  --theme-highlight-rgb: 255 220 198;
  --theme-secondary-rgb: 244 190 112;
  --theme-border-rgb: 255 220 198;
}

:root[data-color-preset='mint'] {
  --background: #081512;
  --foreground: #effff8;
  --card: #122620;
  --card-foreground: #effff8;
  --popover: #173229;
  --popover-foreground: #effff8;
  --primary: #a8e06f;
  --primary-foreground: #142008;
  --secondary: #244537;
  --secondary-foreground: #effff8;
  --muted: #1a3329;
  --muted-foreground: #a8c4b5;
  --accent: #2f5944;
  --accent-foreground: #effff8;
  --border: rgb(208 255 224 / 14%);
  --input: rgb(208 255 224 / 17%);
  --ring: #a8e06f;
  --sidebar: #0e211a;
  --sidebar-foreground: #effff8;
  --sidebar-primary: #a8e06f;
  --sidebar-primary-foreground: #142008;
  --sidebar-accent: #244537;
  --sidebar-accent-foreground: #effff8;
  --sidebar-border: rgb(208 255 224 / 14%);
  --sidebar-ring: #a8e06f;
  --theme-accent-rgb: 168 224 111;
  --theme-highlight-rgb: 208 255 224;
  --theme-secondary-rgb: 98 207 178;
  --theme-border-rgb: 208 255 224;
}

:root[data-color-preset='mono'] {
  --background: #101112;
  --foreground: #f5f5f5;
  --card: #1d1f21;
  --card-foreground: #f5f5f5;
  --popover: #25282b;
  --popover-foreground: #f5f5f5;
  --primary: #e5e7eb;
  --primary-foreground: #151618;
  --secondary: #34373b;
  --secondary-foreground: #f5f5f5;
  --muted: #292c2f;
  --muted-foreground: #a9adb2;
  --accent: #454a50;
  --accent-foreground: #ffffff;
  --border: rgb(245 245 245 / 15%);
  --input: rgb(245 245 245 / 18%);
  --ring: #e5e7eb;
  --sidebar: #181a1c;
  --sidebar-foreground: #f5f5f5;
  --sidebar-primary: #e5e7eb;
  --sidebar-primary-foreground: #151618;
  --sidebar-accent: #34373b;
  --sidebar-accent-foreground: #f5f5f5;
  --sidebar-border: rgb(245 245 245 / 15%);
  --sidebar-ring: #e5e7eb;
  --theme-accent-rgb: 229 231 235;
  --theme-highlight-rgb: 245 245 245;
  --theme-secondary-rgb: 164 174 184;
  --theme-border-rgb: 245 245 245;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-family:
      'Plus Jakarta Sans',
      system-ui,
      -apple-system,
      sans-serif;
  }
}

@layer components {
  .mt-page-surface {
    position: relative;
    isolation: isolate;
    background-color: var(--background);
  }

  .mt-page-surface::before {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    content: '';
    opacity: 0.18;
    background-image:
      linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 76%);
  }

  .mt-home-page::after {
    position: fixed;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    content: '';
    opacity: 0.42;
    background:
      linear-gradient(118deg, transparent 12%, rgb(var(--theme-accent-rgb) / 12%) 38%, transparent 59%),
      linear-gradient(286deg, transparent 25%, rgb(var(--theme-secondary-rgb) / 10%) 48%, transparent 72%),
      linear-gradient(180deg, transparent 20%, rgb(var(--theme-highlight-rgb) / 4%) 54%, transparent 84%);
    background-size: 170% 170%, 160% 160%, 100% 100%;
    background-position: 0% 20%, 100% 70%, center;
    filter: blur(28px);
    animation: mt-home-light-drift 24s ease-in-out infinite alternate;
  }

  .mt-page-surface > :not(.mt-global-background) {
    position: relative;
    z-index: 1;
  }

  .mt-global-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    filter: saturate(0.85) brightness(var(--mt-background-brightness, 0.6));
  }

  .mt-global-background-glass {
    transform: scale(1.03);
  }

  .mt-global-background::before {
    position: absolute;
    inset: 0;
    background: var(--mt-auto-tint, transparent);
    content: '';
    mix-blend-mode: soft-light;
    opacity: 0.28;
  }

  .mt-global-background::after {
    position: absolute;
    inset: 0;
    background-color: rgb(8 11 18 / 54%);
    content: '';
  }

  .mt-global-background-glass::after {
    backdrop-filter: blur(14px);
  }

  .mt-card,
  .mt-card-strong {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(var(--theme-border-rgb) / 13%);
    background-color: rgb(20 27 39 / 94%);
    box-shadow:
      0 16px 44px rgb(0 0 0 / 24%),
      inset 0 1px 0 rgb(255 255 255 / 5%);
    backdrop-filter: blur(18px);
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease;
  }

  .mt-card::after,
  .mt-card-strong::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
      135deg,
      rgb(var(--theme-highlight-rgb) / 14%),
      transparent 34%,
      transparent 68%,
      rgb(var(--theme-secondary-rgb) / 10%)
    );
    content: '';
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .mt-card:hover::after,
  .mt-card-strong:hover::after {
    opacity: 1;
  }

  .mt-card:hover,
  .mt-card-strong:hover {
    border-color: rgb(var(--theme-highlight-rgb) / 28%);
    box-shadow:
      0 20px 52px rgb(0 0 0 / 30%),
      0 0 28px rgb(var(--theme-accent-rgb) / 7%),
      inset 0 1px 0 rgb(255 255 255 / 7%);
  }

  .mt-card > *,
  .mt-card-strong > * {
    position: relative;
    z-index: 1;
  }

  .mt-card-strong {
    background-color: rgb(28 36 50 / 96%);
    box-shadow:
      0 24px 64px rgb(0 0 0 / 34%),
      inset 0 1px 0 rgb(255 255 255 / 6%);
  }

  /* Homepage surfaces use a lighter glass treatment so the shared background remains visible. */
  .mt-home-page .mt-card,
  .mt-home-page .mt-card-strong {
    border-color: rgb(var(--theme-border-rgb) / 20%);
    background-color: color-mix(in srgb, var(--card) 58%, transparent);
    backdrop-filter: blur(24px) saturate(1.18);
    box-shadow:
      0 18px 48px rgb(0 0 0 / 22%),
      inset 0 1px 0 rgb(255 255 255 / 10%),
      inset 0 0 0 1px rgb(var(--theme-highlight-rgb) / 4%);
  }

  .mt-home-page .mt-card:hover,
  .mt-home-page .mt-card-strong:hover {
    border-color: rgb(var(--theme-highlight-rgb) / 34%);
    box-shadow:
      0 22px 56px rgb(0 0 0 / 28%),
      0 0 32px rgb(var(--theme-accent-rgb) / 10%),
      inset 0 1px 0 rgb(255 255 255 / 13%);
  }

  .mt-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--theme-highlight-rgb) / 17%);
    border-radius: 1rem;
    background-color: rgb(var(--theme-accent-rgb) / 8%);
    color: rgb(var(--theme-highlight-rgb));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
  }

  .mt-hero {
    position: relative;
    display: grid;
    min-height: 240px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgb(var(--theme-border-rgb) / 13%);
    border-radius: 2rem;
    background:
      radial-gradient(circle at 10% 42%, rgb(var(--theme-accent-rgb) / 22%), transparent 42%),
      radial-gradient(circle at 90% 38%, rgb(var(--theme-secondary-rgb) / 20%), transparent 44%),
      linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2%)),
      repeating-linear-gradient(90deg, transparent 0 32px, rgb(255 255 255 / 3%) 33px, transparent 34px),
      rgb(20 27 39 / 96%);
    box-shadow:
      0 24px 64px rgb(0 0 0 / 30%),
      inset 0 1px 0 rgb(255 255 255 / 7%);
  }

  .mt-home-page .mt-hero {
    border-color: rgb(var(--theme-border-rgb) / 24%);
    background:
      linear-gradient(118deg, rgb(var(--theme-accent-rgb) / 12%), transparent 42%),
      linear-gradient(300deg, rgb(var(--theme-secondary-rgb) / 10%), transparent 48%),
      color-mix(in srgb, var(--card) 52%, transparent);
    backdrop-filter: blur(26px) saturate(1.2);
  }

  .mt-home-page > header {
    border-color: rgb(var(--theme-border-rgb) / 20%);
    background-color: color-mix(in srgb, var(--background) 54%, transparent);
    backdrop-filter: blur(22px) saturate(1.15);
  }

  .mt-hero::before {
    position: absolute;
    width: min(760px, 96vw);
    aspect-ratio: 1;
    border: 1px solid rgb(var(--theme-highlight-rgb) / 9%);
    border-radius: 999px;
    box-shadow:
      inset 0 0 0 46px rgb(var(--theme-highlight-rgb) / 1.8%),
      inset 0 0 0 90px rgb(var(--theme-highlight-rgb) / 1.2%),
      inset 0 0 0 140px rgb(var(--theme-highlight-rgb) / 0.8%),
      0 0 90px rgb(var(--theme-accent-rgb) / 8%);
    content: '';
    transform: translateY(24%);
    rotate: 0deg;
    animation: mt-slow-disc 18s linear infinite;
  }

  .mt-hero::after {
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
      linear-gradient(110deg, transparent 0 34%, rgb(var(--theme-highlight-rgb) / 12%) 46%, transparent 58% 100%),
      repeating-linear-gradient(90deg, transparent 0 34px, rgb(255 255 255 / 4.5%) 35px, transparent 36px);
    content: '';
    opacity: 0.34;
    mix-blend-mode: screen;
    pointer-events: none;
    transform: translateX(-18%);
    animation: mt-hero-sheen 8s ease-in-out infinite;
  }

  .mt-hero > * {
    position: relative;
    z-index: 1;
  }

  .mt-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.15;
  }

  .mt-player-stage {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(var(--theme-border-rgb) / 13%);
    border-radius: 1.5rem;
    background-color: rgb(6 9 15 / 82%);
    box-shadow:
      0 24px 64px rgb(0 0 0 / 34%),
      inset 0 1px 0 rgb(255 255 255 / 6%);
  }

  .mt-player-stage::before {
    position: absolute;
    inset: 10%;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgb(var(--theme-highlight-rgb) / 8%);
    border-radius: 999px;
    box-shadow: inset 0 0 0 72px rgb(var(--theme-highlight-rgb) / 1.2%);
    content: '';
  }

  .mt-player-stage > * {
    position: relative;
    z-index: 1;
  }

  .mt-soft-divider {
    height: 1px;
    background-color: rgb(var(--theme-border-rgb) / 16%);
  }

  @keyframes mt-hero-sheen {
    0%,
    100% {
      opacity: 0.18;
      transform: translateX(-24%);
    }

    48% {
      opacity: 0.42;
      transform: translateX(18%);
    }
  }

  @keyframes mt-slow-disc {
    to {
      rotate: 360deg;
    }
  }

  @keyframes mt-home-light-drift {
    0% {
      background-position: 0% 20%, 100% 70%, center;
      transform: rotate(-2deg) scale(1);
    }

    100% {
      background-position: 100% 55%, 0% 35%, center;
      transform: rotate(2deg) scale(1.06);
    }
  }
}

/* ===== Scrollbar styling ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--theme-accent-rgb) / 22%);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--theme-accent-rgb) / 42%);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--theme-accent-rgb) / 24%) transparent;
}

/* Utility: hide scrollbar while keeping scroll functional */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== Marquee text overflow animation ===== */
@keyframes marquee {
  0%,
  15% {
    transform: translateX(0);
  }
  45%,
  55% {
    transform: translateX(var(--marquee-distance));
  }
  85%,
  100% {
    transform: translateX(0);
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== AMLL Lyric Player overrides ===== */
.amll-container {
  color: var(--foreground);
  opacity: 0.9;
}

/* 翻译歌词子行（lyricSubLine 中第一个） */
.amll-container [class*='lyricSubLine']:first-of-type {
  font-size: max(var(--amll-translated-font-size, 0.65em), 10px) !important;
}

/* 罗马音歌词子行（lyricSubLine 中第二个；仅在同时有翻译+罗马音时生效） */
.amll-container [class*='lyricSubLine'] + [class*='lyricSubLine'] {
  font-size: max(var(--amll-roman-font-size, 0.5em), 10px) !important;
}

/* 逐词罗马音注音（word 级别的 ruby 文本） */
.amll-container [class*='romanWord'] {
  font-size: max(var(--amll-roman-font-size, 0.5em), 8px) !important;
}