:root {
      --bg: #0b0f19;
      --bg-gradient: radial-gradient(circle at 50% 0%, #1e293b 0%, #0b0f19 100%);
      --card: rgba(30, 41, 59, 0.4);
      --border: rgba(255, 255, 255, 0.08);
      --text: #f1f5f9;
      --muted: #94a3b8;
      --primary: #38bdf8;
      --primary-glow: rgba(56, 189, 248, 0.3);
      --success: #10b981;
      --danger: #ef4444;
      --radius: 24px;
      --font: "Outfit", "HarmonyOS Sans SC", "PingFang SC", system-ui, sans-serif;
    }

    .full-width {
      width: 100%;
      justify-content: center;
      margin-top: 10px;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      outline: none;
    }

    body {
      margin: 0;
      font-family: var(--font);
      background: var(--bg);
      background-image: var(--bg-gradient);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
      line-height: 1.6;
    }

    .app-shell {
      max-width: 900px;
      margin: 0 auto;
      padding: 20px 16px 140px;
    }

    .glass {
      background: var(--card);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--border);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      border-radius: var(--radius);
    }

    /* Welcom Page Styles */
    #viewWelcome {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-top: 60px;
    }

    .hero-title {
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 16px;
      background: linear-gradient(135deg, #fff, var(--primary));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-subtitle {
      font-size: 18px;
      color: var(--muted);
      margin-bottom: 40px;
      max-width: 600px;
    }

    .method-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 16px;
      width: 100%;
      margin-bottom: 60px;
    }

    .method-card {
      padding: 24px;
      text-align: center;
      border-radius: 20px;
      transition: transform 0.3s;
    }

    .method-card:hover {
      transform: translateY(-5px);
    }

    .method-card i {
      font-style: normal;
      font-size: 32px;
      display: block;
      margin-bottom: 12px;
    }

    .method-card h3 {
      font-size: 16px;
      margin: 0 0 8px;
    }

    .method-card p {
      font-size: 12px;
      color: var(--muted);
      margin: 0;
    }

    /* Hub Page Styles */
    .plan-header {
      margin-bottom: 32px;
    }

    .plan-card {
      padding: 32px;
      margin-bottom: 24px;
      text-align: center;
    }

    .dashboard-card {
      padding: 0;
      margin-bottom: 24px;
      overflow: hidden;
    }

    .dashboard-header {
      padding: 24px 24px 16px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 1px solid var(--border);
    }

    .dashboard-titles h2 {
      font-size: 20px;
      margin: 0;
    }

    .dashboard-titles p {
      font-size: 13px;
      color: var(--muted);
      margin: 4px 0 0;
    }

    .dashboard-content {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .dashboard-main {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .dashboard-info {
      flex: 1;
    }

    .day-badge {
      display: inline-block;
      padding: 4px 12px;
      background: var(--primary-glow);
      color: var(--primary);
      border-radius: 20px;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .status-summary {
      font-size: 15px;
      font-weight: 600;
    }

    #btnQuickContinue {
      width: 100%;
      justify-content: center;
      padding: 16px;
      font-size: 16px;
      background: var(--primary);
      color: #000;
    }

    .btn-sm {
      padding: 6px 12px;
      font-size: 12px;
      border-radius: 8px;
    }

    .progress-overview {
      display: none;
      /* Replaced by dashboard */
    }

    .progress-ring {
      position: relative;
      width: 100px;
      height: 100px;
    }

    .progress-ring circle {
      fill: none;
      stroke-width: 8;
      stroke: rgba(255, 255, 255, 0.1);
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }

    .progress-ring circle.bar {
      stroke: var(--primary);
      stroke-dasharray: 283;
      stroke-dashoffset: 283;
      transition: stroke-dashoffset 1s ease;
    }

    .progress-text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      font-size: 20px;
      font-weight: 700;
    }

    .article-list {
      display: grid;
      gap: 12px;
    }

    .article-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 16px;
      cursor: pointer;
      transition: 0.2s;
      border: 1px solid transparent;
    }

    .article-item:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(56, 189, 248, 0.4);
    }

    .article-item.active {
      border-color: var(--primary);
      background: rgba(56, 189, 248, 0.1);
    }

    .article-item.done {
      opacity: 0.6;
    }

    .article-num {
      font-size: 14px;
      font-weight: 700;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: grid;
      place-items: center;
    }

    .article-item.active .article-num {
      background: var(--primary);
      color: #000;
    }

    .article-item.done .article-num {
      background: var(--success);
      color: #000;
    }

    .article-info {
      flex: 1;
    }

    .article-title {
      font-size: 17px;
      font-weight: 600;
    }

    .article-meta {
      font-size: 13px;
      color: var(--muted);
    }

    .article-thumb {
      width: 110px;
      height: 74px;
      border-radius: 12px;
      background-size: cover;
      background-position: center;
      background-color: rgba(255, 255, 255, 0.05);
      flex-shrink: 0;
      border: 1px solid var(--border);
    }

    /* Common Components */
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 5px;
      position: sticky;
      top: 10px;
      z-index: 1000;
      margin-bottom: 24px;
      transition: all 0.3s ease;
      gap: 20px;
    }

    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      /* Consistent spacing between all action items */
      margin-left: auto;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .icon {
      width: 20px;
      height: 20px;
      fill: #ffffff !important;
      /* Force white for visibility */
      color: #ffffff !important;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }

    /* In Trainer View: Shrink header elements to icons and hide nicknames */
    .in-trainer .topbar .brand span,
    .in-trainer .topbar .nav .btn span,
    .in-trainer .topbar .user-profile .nickname,
    .in-trainer .topbar .user-profile .btn-login span {
      display: none !important;
    }

    .in-trainer .topbar .nav {
      gap: 8px;
    }

    .in-trainer .topbar .nav .btn {
      padding: 10px;
      min-width: 44px;
      justify-content: center;
    }

    .in-trainer .topbar .brand {
      gap: 0;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .brand:hover {
      opacity: 0.8;
    }

    .brand-badge {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: linear-gradient(135deg, #0ea5e9, #22d3ee);
      display: grid;
      place-items: center;
      color: #000;
      font-size: 18px;
      flex-shrink: 0;
    }

    .brand-badge svg {
      width: 20px;
      height: 20px;
    }

    .user-profile {
      position: relative;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      padding: 4px;
      border-radius: 30px;
      transition: background 0.2s;
    }

    .user-info:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .user-info:hover .user-dropdown {
      display: block;
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .user-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      width: 160px;
      padding: 8px;
      display: none;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      pointer-events: none;
      z-index: 1001;
      border-radius: 16px;
      margin-top: 0;
      padding-top: 12px;
    }

    /* bridge the gap between user-info and user-dropdown to prevent hover loss */
    .user-dropdown::before {
      content: '';
      position: absolute;
      top: -15px;
      left: 0;
      right: 0;
      height: 15px;
      background: transparent;
    }

    .dropdown-item {
      padding: 10px 16px;
      border-radius: 12px;
      font-size: 14px;
      color: var(--text);
      transition: background 0.2s;
    }

    .dropdown-item:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--primary);
    }

    .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid var(--primary);
      background: var(--card);
    }

    .nickname {
      font-size: 14px;
      font-weight: 600;
      max-width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .btn-login {
      padding: 8px 16px !important;
      font-size: 13px !important;
      border-radius: 12px !important;
      background: var(--primary-glow) !important;
      color: var(--primary) !important;
      border: 1px solid rgba(56, 189, 248, 0.2) !important;
      font-weight: 700;
      transition: all 0.3s ease;
    }

    .btn-login:hover {
      background: var(--primary) !important;
      color: #000 !important;
      transform: translateY(-2px);
    }

    .btn-login .icon {
      width: 18px;
      height: 18px;
      margin-right: 4px;
      fill: currentColor !important;
    }

    .in-trainer .btn-login {
      padding: 10px !important;
      min-width: 44px;
      justify-content: center;
    }

    .in-trainer .btn-login .icon {
      margin-right: 0;
    }

    /* Ensure app-shell remains centered on PC */
    .app-shell {
      max-width: 900px;
      margin: 0 auto;
      padding: 20px 16px 140px;
      width: 100%;
    }

    .btn {
      padding: 12px 24px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.05);
      color: var(--text);
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
    }

    .btn:hover .icon {
      transform: scale(1.1);
    }

    .btn:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-1px);
    }

    .btn.primary {
      background: var(--primary);
      color: #0f172a;
      border: none;
      box-shadow: 0 4px 14px var(--primary-glow);
    }

    .btn.ghost {
      background: transparent;
      border: none;
    }

    .full-width {
      width: 100%;
      justify-content: center;
      margin-top: 10px;
    }

    /* Modal Styles */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 3000;
      display: grid;
      place-items: center;
    }

    .modal-content {
      width: 95%;
      max-width: 400px;
      padding: 32px;
      border-radius: 32px;
      position: relative;
      background: var(--card);
      border: 1px solid var(--border);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
    }

    .modal-close {
      position: absolute;
      top: 24px;
      right: 24px;
      font-size: 28px;
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
    }

    .auth-form {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      /* Space between groups */
    }

    .form-group {
      width: 100%;
      margin-bottom: 8px;
      /* Extra margin between input groups */
    }

    .auth-form input {
      padding: 16px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.05);
      color: #fff;
      font-size: 16px;
      width: 100%;
      transition: border-color 0.3s;
    }

    .auth-form input:focus {
      border-color: var(--primary);
      background: rgba(255, 255, 255, 0.08);
    }

    .auth-form button {
      background: linear-gradient(135deg, var(--primary), #0ea5e9);
      color: #000;
      border: none;
      padding: 16px;
      border-radius: 16px;
      font-weight: 700;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 15px var(--primary-glow);
    }

    .auth-form button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px var(--primary-glow);
      filter: brightness(1.1);
    }

    .auth-form button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none !important;
    }

    .auth-toggle {
      margin-top: 20px;
      text-align: center;
      font-size: 14px;
      color: var(--muted);
    }

    #forgotPasswordLink {
      font-size: 13px;
      text-align: right;
      cursor: pointer;
      color: var(--primary);
      opacity: 0.8;
      transition: opacity 0.2s;
      margin-top: -8px;
      /* Slightly pull up towards the password field */
      margin-bottom: 8px;
    }

    #forgotPasswordLink:hover {
      opacity: 1;
    }

    .auth-toggle a {
      color: var(--primary);
      text-decoration: none;
      margin-left: 6px;
      font-weight: 700;
    }

    .view {
      animation: slideIn 0.5s ease-out both;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(15px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hidden {
      display: none !important;
    }

    /* Trainer & Player Styles from previous version */
    .player-dock {
      position: fixed;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      max-width: 500px;
      padding: 20px;
      z-index: 1000;
      border-radius: 28px;
    }

    .player-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
    }

    .btn-circle {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      padding: 0;
      justify-content: center;
      font-size: 18px;
    }

    .btn-play {
      width: 56px;
      height: 56px;
      background: #fff;
      color: #000;
      border: none;
      font-size: 22px;
    }

    .progress-track {
      width: 100%;
      height: 6px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 3px;
      margin-bottom: 12px;
      overflow: hidden;
    }

    #progressBar {
      height: 100%;
      background: var(--primary);
      width: 0;
    }

    .stepper {
      display: flex;
      gap: 6px;
      margin-bottom: 24px;
      padding: 4px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 16px;
    }

    .step {
      flex: 1;
      padding: 8px;
      font-size: 10px;
      font-weight: 800;
      text-align: center;
      border-radius: 10px;
      color: var(--muted);
    }

    .step.active {
      background: var(--primary);
      color: #000;
    }

    .step.unlocked {
      background: rgba(56, 189, 248, 0.2);
      color: var(--primary);
      cursor: pointer;
    }

    .step.unlocked:hover {
      background: rgba(56, 189, 248, 0.3);
    }

    .trainer-content {
      font-size: 19px;
      line-height: 1.8;
      margin-bottom: 40px;
      background: rgba(0, 0, 0, 0.25);
      padding: 24px;
      border-radius: 24px;
      min-height: 200px;
    }

    .sentence {
      margin-bottom: 20px;
      padding: 12px;
      border-radius: 14px;
      transition: 0.2s;
      cursor: pointer;
    }

    .sentence.active {
      background: rgba(56, 189, 248, 0.05);
      border-left: 2px solid var(--primary);
    }

    .segment {
      padding: 2px 4px;
      margin: 0 -2px;
      border-radius: 4px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-block;
      white-space: pre-wrap;
    }

    .segment.highlight {
      color: var(--primary);
      text-shadow: 0 0 10px var(--primary-glow);
      font-weight: 800;
    }

    .token {
      padding: 2px 4px;
      border-radius: 6px;
      transition: 0.2s;
      user-select: none;
      cursor: pointer;
    }

    .token.wrong {
      color: var(--danger);
      border-bottom: 2px solid var(--danger);
    }

    .token.mask {
      background: rgba(255, 255, 255, 0.1);
      color: transparent;
      user-select: none;
    }

    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(10px);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 2000;
    }

    .modal-card {
      background: #1e293b;
      border-radius: 28px;
      padding: 32px;
      width: 400px;
      max-width: 90%;
    }

    .dict-card h3 {
      font-size: 24px;
      margin: 0;
    }

    .dict-phonetic {
      color: var(--primary);
      margin: 4px 0 20px;
      font-family: monospace;
    }

    .dict-item {
      margin-bottom: 8px;
    }

    .video-overlay-subtitle {
      position: absolute;
      bottom: -100px;
      /* 锚定在底部，向下偏移预留出显示空间 */
      left: 0;
      width: 100%;
      padding: 0 10px;
      pointer-events: none;
      z-index: 10;
      display: flex;
      justify-content: center;
      transition: opacity 0.3s;
    }

    .subtitle-box {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      padding: 5px 5px;
      border-radius: 12px;
      color: #fff;
      font-size: 20px !important;
      font-weight: 600;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
      /* 初始状态处于下方且透明 */
      transform: translateY(20px);
      opacity: 0;
      max-width: 95%;
      line-height: 1.4;
    }

    /* 进场动画：快速切入，平滑减速 */
    .subtitle-box.animate-in {
      animation: subtitleEnter 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    }

    @keyframes subtitleEnter {
      from {
        transform: translateY(30px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .pane {
      padding: 32px;
    }

    /* 关于页面样式 */
    .about-container {
      max-width: 900px;
      margin: 0 auto;
      padding-bottom: 100px;
    }

    .hero-gradient-text {
      background: linear-gradient(135deg, #fff 0%, #38bdf8 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 800;
    }

    .about-section {
      margin-bottom: 60px;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s ease forwards;
    }

    .about-section:nth-child(2) {
      animation-delay: 0.2s;
    }

    .about-section:nth-child(3) {
      animation-delay: 0.4s;
    }

    .about-section:nth-child(4) {
      animation-delay: 0.6s;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .concept-card {
      background: rgba(15, 23, 42, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      padding: 32px;
      margin: 20px 0;
      transition: transform 0.3s ease;
    }

    .concept-card:hover {
      transform: scale(1.02);
      border-color: var(--primary);
    }

    .feature-tag {
      display: inline-block;
      padding: 4px 12px;
      background: rgba(56, 189, 248, 0.1);
      color: var(--primary);
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .philosophy-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 24px;
    }

    .flow-step {
      display: flex;
      gap: 20px;
      margin-bottom: 24px;
    }

    .step-num {
      width: 32px;
      height: 32px;
      background: var(--primary);
      color: #000;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      flex-shrink: 0;
    }

    /* 视频加载与封面样式 (Global) */
    .b1-media-container {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      background: #000;
      cursor: pointer;
      border-radius: 16px;
      /* overflow: hidden;  // 允许字幕向上侵入或向下延申 */
      border: 1px solid var(--border);
      margin-bottom: 110px !important;
      /* 预留出约 3 行字幕不遮挡画面的高度，并与下方按钮保持间距 */
    }

    .b1-poster {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      transition: opacity 0.5s;
      z-index: 2;
    }

    .b1-play-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      background: var(--primary);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: #000;
      z-index: 3;
      box-shadow: 0 0 20px var(--primary-glow);
    }

    .media-loading-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 4;
      backdrop-filter: blur(4px);
    }

    .spinner {

      width: 44px;

      height: 44px;

      border: 3px solid rgba(255, 255, 255, 0.1);

      border-top-color: var(--primary);

      border-radius: 50%;

      animation: spin 0.8s linear infinite;

    }



    @keyframes spin {

      to {

        transform: rotate(360deg);

      }

    }



    /* 录音脉冲动画 */

    .dot-pulse {

      display: inline-block;

      width: 12px;

      height: 12px;

      border-radius: 50%;

      background-color: var(--danger);

      box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);

      animation: pulse 1.2s infinite;

    }



    @keyframes pulse {

      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
      }

      70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
      }

      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
      }

    }



    .b1-media-container.loading .media-loading-mask {


      display: flex;
    }

    .b1-media-container.playing .b1-poster,
    .b1-media-container.playing .b1-play-overlay {
      opacity: 0;
      pointer-events: none;
    }

    .btn-icon-play {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 8px;
  font-size: 12px;
  color: var(--primary);
  transition: all 0.2s;
}
.btn-icon-play:hover {
  background: var(--primary);
  color: #000;
  transform: scale(1.1);
}

@media (max-width: 600px) {
      .app-shell {
        padding: 10px 8px 140px;
      }

      .pane {
        padding: 5px 5px !important;
      }

      .trainer-content {
        padding: 16px 12px !important;
        font-size: 17px !important;
        margin-bottom: 24px;
      }

      #b1VideoWrapper {
        margin: 12px 0px 110px !important;
        border-radius: 0 !important;
      }

      #paneB1 .btn {
        display: flex;
        width: 100%;
        justify-content: center;
      }

      .article-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 20px;
      }

      .article-thumb {
        width: 100% !important;
        height: 180px !important;
        border-radius: 14px;
      }

      .article-num {
        align-self: flex-start;
        margin-bottom: 4px;
      }

      .article-title {
        font-size: 18px !important;
      }

      /* 关于页面移动端适配 */
      .philosophy-grid {
        grid-template-columns: 1fr;
      }

      .about-container {
        padding: 0 20px;
      }

      .concept-card {
        padding: 24px;
      }

      .hero-gradient-text {
        font-size: 32px !important;
      }

      /* 移动端导航精简：隐藏文字，仅留图标 */
      .topbar {
        padding: 10px 12px;
        gap: 8px;
      }

      .topbar .nav {
        gap: 4px;
      }

      .topbar .nav .btn {
        padding: 8px;
        min-width: 40px;
        justify-content: center;
      }

      .topbar .nav .btn span {
        display: none;
      }

      .topbar .nav .btn .icon {
        width: 22px;
        height: 22px;
        margin: 0;
      }


      .topbar .brand span {
        font-size: 14px;
        display: none;
        /* Hide brand text on very small screens if necessary, or just keep it small */
      }

      @media (min-width: 400px) {
        .topbar .brand span {
          display: block;
        }
      }

      .topbar .brand-badge {
        width: 30px;
        height: 30px;
        font-size: 16px;
      }
    }

/* --- History View --- */
.history-container {
  max-width: 1000px;
  margin: 20px auto;
  padding: 30px;
  border-radius: 24px;
}

.history-title {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 24px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* History Item - Base (Mobile Card Style) */
.history-item {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
}

.history-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
}

.h-cover {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #000;
}

.h-step-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  color: var(--primary);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.1);
}

.h-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.h-main {
  flex: 1;
}

.h-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 6px;
  color: var(--fg);
}

.h-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.h-progress-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.h-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
}

.h-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}

.h-score {
  color: var(--primary);
  font-weight: 600;
}

.h-action-btn {
  display: none; /* Mobile hides button, whole card is click */
}

/* Desktop Styles */
@media (min-width: 768px) {
  .history-item {
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    height: auto;
    min-height: 80px;
  }

  .h-cover {
    width: 120px;
    height: 68px;
    aspect-ratio: auto;
    border-radius: 8px;
    margin-right: 20px;
    flex-shrink: 0;
  }
  
  .h-step-badge {
    top: 4px; left: 4px;
    padding: 2px 6px;
    font-size: 9px;
  }

  .h-info {
    padding: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .h-main {
    flex: 2;
    min-width: 0;
    margin-right: 24px;
  }
  
  .h-title {
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .h-progress-block {
    flex: 1;
    max-width: 240px;
    margin-right: 24px;
  }
  
  .h-stats {
    justify-content: space-between; /* Keep spacing in bar row */
  }

  .h-stat-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 100px;
    gap: 4px;
    font-size: 13px;
  }
  
  .h-action-btn {
    display: inline-flex;
    margin-left: 24px;
    padding: 8px 16px;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.2s;
  }
  
  .history-item:hover .h-action-btn {
    opacity: 1;
  }
}