:root {
      --bg: #07070a;
      --card: #14141c;
      --text: #f5f5f7;
      --muted: #9a9aa8;
      --pink: #ff2d78;
      --pink-2: #ff6b9d;
      --brand: #9b262a;
      --brand-2: #7a1c20;
      --line: rgba(255, 255, 255, 0.08);
      --live: #ff2a2a;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      min-height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    body {
      background:
        radial-gradient(ellipse 80% 50% at 50% -8%, rgba(255, 45, 120, 0.2), transparent 55%),
        var(--bg);
    }

    .wrap {
      max-width: 430px;
      margin: 0 auto;
      padding: 16px 14px 108px;
    }

    .topbar {
      display: flex;
      align-items: center;
      margin-bottom: 14px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 800;
      font-size: 20px;
      letter-spacing: -0.04em;
    }

    .logo {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      overflow: hidden;
      background: var(--brand);
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .featured {
      position: relative;
      height: 420px;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 16px;
      cursor: pointer;
      background: #111;
    }

    .featured video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 42%;
      pointer-events: none;
    }

    .featured .shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 20%, rgba(0, 0, 0, 0.82));
    }

    .live-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      background: var(--live);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      border-radius: 4px;
      padding: 3px 6px;
      display: flex;
      align-items: center;
      gap: 5px;
      z-index: 2;
    }

    .live-tag::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #fff;
      animation: blink 1s infinite;
    }

    @keyframes blink {
      50% { opacity: 0.35; }
    }

    .featured-tip {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      max-width: calc(100% - 16px);
      width: max-content;
      white-space: nowrap;
      text-align: center;
      font-size: 10px;
      line-height: 1.3;
      color: #f3c7d6;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      padding: 5px 8px;
      pointer-events: none;
      z-index: 2;
    }

    .featured-cta {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 16px;
      z-index: 2;
    }

    .featured-cta h1 {
      font-size: 24px;
      line-height: 1.25;
      margin-bottom: 8px;
    }

    .featured-cta h1 span { color: var(--pink-2); }

    .featured-cta p {
      color: #d7d7de;
      font-size: 13px;
      line-height: 1.5;
      margin-bottom: 12px;
    }

    .overlay-btn {
      width: 100%;
      height: 48px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, #c43a3e 0%, var(--brand) 45%, var(--brand-2) 100%);
      color: #fff;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(155, 38, 42, 0.42);
    }

    .overlay-btn:active { transform: scale(0.98); }

    .sound-toggle {
      position: absolute;
      right: 10px;
      top: 42px;
      z-index: 3;
      border: 0;
      background: rgba(0, 0, 0, 0.45);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      border-radius: 999px;
      padding: 6px 10px;
      cursor: pointer;
    }

    .section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      margin: 6px 2px 10px;
    }

    .section-title small {
      color: var(--muted);
      font-size: 12px;
    }

    .models {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }

    .model {
      height: 168px;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      background: #111;
      cursor: pointer;
    }

    .model img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .model .shade {
      position: absolute;
      inset: auto 0 0;
      height: 70%;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
    }

    .model .info {
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 8px;
    }

    .model .name {
      font-size: 12px;
      font-weight: 700;
    }

    .model .line {
      font-size: 10px;
      color: #ffc2d6;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .clips {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 8px;
    }

    .clip {
      position: relative;
      height: 160px;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      background: #111;
    }

    .clip.wide {
      height: 268px;
      grid-column: 1 / -1;
    }

    .clip video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }

    .clip.wide video {
      object-fit: contain;
      transform: scale(1.22);
      transform-origin: center 40%;
      background: #111;
    }

    .clip .shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.8));
    }

    .play {
      position: absolute;
      left: 50%;
      top: 42%;
      transform: translate(-50%, -50%);
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 45, 120, 0.85);
      display: grid;
      place-items: center;
    }

    .play::after {
      content: "";
      width: 0;
      height: 0;
      border-left: 10px solid #fff;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      margin-left: 2px;
    }

    .clip .cap {
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 8px;
      font-size: 11px;
      line-height: 1.35;
    }

    .clip-len {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0, 0, 0, 0.55);
      font-size: 11px;
      border-radius: 4px;
      padding: 3px 6px;
    }

    .dock {
      position: fixed;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: min(430px, 100%);
      padding: 10px 14px 16px;
      background: linear-gradient(transparent, #07070a 28%);
      z-index: 10;
    }

    .btn {
      width: 100%;
      height: 52px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, #c43a3e 0%, var(--brand) 45%, var(--brand-2) 100%);
      color: #fff;
      font-size: 17px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(155, 38, 42, 0.42);
    }

    .btn:active { transform: scale(0.98); }

    .dock p {
      text-align: center;
      color: var(--muted);
      font-size: 11px;
      margin-top: 6px;
    }

    .mask, .toast-mask {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.62);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 20;
    }

    .mask.show, .toast-mask.show { display: flex; }

    .dialog {
      width: min(360px, 100%);
      background: #1a1a24;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 22px 20px 18px;
      text-align: center;
    }

    .dialog h2 { font-size: 18px; margin-bottom: 8px; }

    .dialog p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 18px;
    }

    .dialog button {
      width: 100%;
      height: 44px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, #c43a3e 0%, var(--brand) 45%, var(--brand-2) 100%);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(155, 38, 42, 0.32);
    }

    .dialog .ghost {
      margin-top: 8px;
      background: transparent;
      border: 1px solid var(--line);
      color: var(--muted);
      box-shadow: none;
    }