:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --tg-header-offset: 0px;
    --layout-gap: 12px;
    --top-control-height: 42px;
    --top-flag-height: 38px;
    --flag-aspect: 28 / 20;
    /* Компенсация лишнего зазора в TG-inset: подобрано под margin-bottom поиска */
    --tg-top-trim: calc(var(--layout-gap) - 4px);
  }

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

  html, body {
    /* FullScreen в MiniApp: динамическая высота viewport (учитывает авто-скрытие
       адресной строки), блокировка pull-to-refresh, 100% ширины. */
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-family: 'Inter', sans-serif;
    padding: 0;
    background: #0f0f1a;
  }

  .theme-section {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: center;
  }

  @keyframes pro-btn-gleam {
    0%, 100% { opacity: 0.42; }
    50% { opacity: 0.82; }
  }

  @keyframes pro-btn-shine-sweep {
    0%, 10% {
      transform: translateX(-160%) skewX(-10deg);
      opacity: 0;
    }
    16% { opacity: 1; }
    40% {
      transform: translateX(160%) skewX(-10deg);
      opacity: 1;
    }
    48%, 100% {
      transform: translateX(160%) skewX(-10deg);
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pro-btn::after,
    .pro-btn-shine {
      animation: none !important;
    }
    .pro-btn::after { opacity: 0.6; }
  }

  /* Module palette — matches Word Editor Flow (.dot / .folder-icon.tint-*) */
  .section-card.mod-tint-blue {
    --mod-color: #4b8cf5;
    --mod-tint: rgba(75, 140, 245, 0.18);
    --mod-tint-strong: rgba(75, 140, 245, 0.28);
    --mod-shadow: rgba(75, 140, 245, 0.35);
  }
  .section-card.mod-tint-green {
    --mod-color: #30c06e;
    --mod-tint: rgba(48, 192, 110, 0.18);
    --mod-tint-strong: rgba(48, 192, 110, 0.28);
    --mod-shadow: rgba(48, 192, 110, 0.32);
  }
  .section-card.mod-tint-purple {
    --mod-color: #9b6cff;
    --mod-tint: rgba(155, 108, 255, 0.18);
    --mod-tint-strong: rgba(155, 108, 255, 0.28);
    --mod-shadow: rgba(155, 108, 255, 0.38);
  }
  .section-card.mod-tint-orange {
    --mod-color: #ff8c42;
    --mod-tint: rgba(255, 140, 66, 0.18);
    --mod-tint-strong: rgba(255, 140, 66, 0.28);
    --mod-shadow: rgba(255, 140, 66, 0.32);
  }
  .section-card.mod-tint-teal {
    --mod-color: #2ec4b6;
    --mod-tint: rgba(46, 196, 182, 0.18);
    --mod-tint-strong: rgba(46, 196, 182, 0.28);
    --mod-shadow: rgba(46, 196, 182, 0.32);
  }
  .section-card.mod-tint-pink {
    --mod-color: #f472b6;
    --mod-tint: rgba(244, 114, 182, 0.18);
    --mod-tint-strong: rgba(244, 114, 182, 0.28);
    --mod-shadow: rgba(244, 114, 182, 0.32);
  }
  .section-card.mod-tint-coral {
    --mod-color: #ff7eb3;
    --mod-tint: rgba(255, 126, 179, 0.18);
    --mod-tint-strong: rgba(255, 126, 179, 0.28);
    --mod-shadow: rgba(255, 126, 179, 0.32);
  }
  .section-card.mod-tint-lime {
    --mod-color: #a8e063;
    --mod-tint: rgba(168, 224, 99, 0.18);
    --mod-tint-strong: rgba(168, 224, 99, 0.28);
    --mod-shadow: rgba(168, 224, 99, 0.32);
  }
  .section-card.mod-tint-sky {
    --mod-color: #5ec8f8;
    --mod-tint: rgba(94, 200, 248, 0.18);
    --mod-tint-strong: rgba(94, 200, 248, 0.28);
    --mod-shadow: rgba(94, 200, 248, 0.32);
  }
  .section-card.mod-tint-amber {
    --mod-color: #e8a838;
    --mod-tint: rgba(232, 168, 56, 0.18);
    --mod-tint-strong: rgba(232, 168, 56, 0.28);
    --mod-shadow: rgba(232, 168, 56, 0.32);
  }

  .section-card[class*="mod-tint-"] .card-icon {
    background: var(--mod-tint-strong);
    color: var(--mod-color);
  }
  .section-card[class*="mod-tint-"] .card-btn {
    background: var(--mod-color);
    box-shadow: 0 4px 14px var(--mod-shadow);
  }
  .section-card[class*="mod-tint-"] .progress-fill {
    background: var(--mod-color);
    box-shadow: 0 0 8px var(--mod-shadow);
  }

.theme-dark *, .theme-dark *::before, .theme-dark *::after { box-sizing: border-box; margin: 0; padding: 0; }

.theme-dark .app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: var(--shell-content-max, 430px);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-right: var(--safe-area-right);
    padding-left: var(--safe-area-left);
  }
.theme-dark .page-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(900px 600px at 80% -5%, #211a3a 0%, transparent 60%),
                radial-gradient(700px 500px at 10% 40%, #1a1630 0%, transparent 55%),
                linear-gradient(180deg, #0f0f1a 0%, #12122a 100%);
  }
.theme-dark .app > *:not(.page-gradient) {
    position: relative;
    z-index: 1;
  }
  /* ── Scrollable content ── */
.theme-dark .scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: max(0px, calc(var(--safe-area-top) + var(--tg-header-offset) - var(--tg-top-trim))) 14px 14px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
.theme-dark .scroll-area::-webkit-scrollbar { display: none; }
  /* ── Glass card base ── */
.theme-dark .glass {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  /* ── Top bar row ── */
.theme-dark .top-controls {
    display: flex;
    gap: 8px;
    margin: var(--layout-gap) 0;
    align-items: center;
  }
.theme-dark .search-pill {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 0 14px;
    height: var(--top-control-height);
    backdrop-filter: blur(20px);
  }
.theme-dark .search-pill svg { flex-shrink: 0; opacity: 0.5; }
.theme-dark .search-pill span {
    font-size: 14px;
    color: #5a5a7a;
    font-family: 'Inter', sans-serif;
  }
.theme-dark .flag-btn {
    height: var(--top-flag-height);
    width: auto;
    aspect-ratio: var(--flag-aspect);
    padding: 0; border: none; background: none;
    border-radius: 3px;
    display: flex;
    align-items: stretch;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
.theme-dark .flag-btn img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 3px;
    object-fit: cover;
  }
  /* ── Hero: mascot on background + 4 blocks on the right ── */
.theme-dark .hero-section {
    display: grid;
    grid-template-columns: 32.5% 1fr;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 12px;
  }
.theme-dark .hero-mascot {
    position: relative;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: auto;
    overflow: visible;
  }
.theme-dark .hero-mascot-art {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 4px 16px rgba(108,99,255,0.35));
  }
.theme-dark .hero-blocks {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px;
  }
.theme-dark .hero-block {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }
.theme-dark .hero-block-stat {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 16px;
    padding: 10px 12px 10px 14px;
  }
.theme-dark .hero-block-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
  }
.theme-dark .hero-block-streak {
    background: linear-gradient(135deg, rgba(13,148,136,0.15) 0%, rgba(255,255,255,0.04) 55%);
    box-shadow: inset 0 1px 0 rgba(45,212,191,0.14);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
.theme-dark .hero-block-streak::before {
    background: linear-gradient(180deg, #2dd4bf, #0d9488);
    box-shadow: none;
  }
.theme-dark .hero-block-streak .hero-block-value {
    background: linear-gradient(135deg, #fff 35%, #0f766e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
.theme-dark .hero-block-streak .hero-block-sub {
    color: #2dd4bf;
  }
.theme-dark .hero-block-balance {
    background: linear-gradient(135deg, rgba(37,99,235,0.14) 0%, rgba(255,255,255,0.04) 55%);
    box-shadow: inset 0 1px 0 rgba(96,165,250,0.14);
  }
.theme-dark .hero-block-balance::before {
    background: linear-gradient(180deg, #60a5fa, #2563eb);
    box-shadow: none;
  }
.theme-dark .hero-block-balance .hero-block-label { color: #60a5fa; }
.theme-dark .hero-block-balance .hero-block-value {
    background: linear-gradient(135deg, #fff 35%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
.theme-dark .hero-block-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
.theme-dark .hero-block-value {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1;
  }
.theme-dark .hero-block-sub {
    font-size: 10px;
    line-height: 1.3;
    font-weight: 500;
  }
.theme-dark .hero-block-comment {
    grid-column: 1 / -1;
  }
.theme-dark .hero-comment {
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
  }
.theme-dark .hero-block-pro {
    grid-column: 1 / -1;
    padding: 0;
    background: none;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
    border-radius: 14px;
  }
.theme-dark .pro-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border-radius: 14px;
    background-color: #5b52e0;
    box-shadow: 0 4px 16px rgba(108,99,255,0.40);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    border: 1px solid rgba(108,99,255,0.25);
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    clip-path: inset(0 round 14px);
    transition: transform 0.15s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    z-index: 0;
  }
.theme-dark .pro-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: var(--pro-gradient);
    background-size: 480% 480%;
    background-position: var(--pro-pos, 50% 50%);
    filter: blur(10px);
    transform: scale(1.6);
    transform-origin: center;
    z-index: 0;
    pointer-events: none;
  }
.theme-dark .pro-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.24) 0%,
      rgba(255,255,255,0.07) 30%,
      transparent 55%
    );
    pointer-events: none;
    z-index: 1;
    animation: pro-btn-gleam 5.6s ease-in-out infinite;
    animation-delay: var(--pro-gleam-delay, 0s);
  }
.theme-dark .pro-btn-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 12%,
      rgba(255,255,255,0.03) 36%,
      rgba(255,255,255,0.11) 50%,
      rgba(255,255,255,0.03) 64%,
      transparent 88%
    );
    transform: translateX(-160%) skewX(-10deg);
    pointer-events: none;
    will-change: transform, opacity;
    z-index: 2;
    animation: pro-btn-shine-sweep 5.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
.theme-dark .pro-btn-label {
    position: relative;
    z-index: 3;
  }
.theme-dark .pro-btn:active { transform: scale(0.98); }
  /* ── Section cards ── */
.theme-dark .section-card {
    margin-bottom: 12px;
  }
.theme-dark .section-card:last-child {
    margin-bottom: 0;
  }
.theme-dark .card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
.theme-dark .card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
.theme-dark .card-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
.theme-dark .card-icon svg { display: block; width: 20px; height: 20px; }
.theme-dark .card-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
.theme-dark .card-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    line-height: 1.2;
  }
.theme-dark .card-subtitle {
    font-size: 13px;
    color: #a0a0c0;
    line-height: 1.5;
  }
.theme-dark .card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7a72ff, #6c63ff);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    width: 100%;
    border: none;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 16px rgba(108,99,255,0.4);
    margin-top: 4px;
    transition: opacity 0.15s;
  }
.theme-dark .card-btn:active { opacity: 0.8; }
  /* ── Progress bar ── */
.theme-dark .progress-track {
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    overflow: hidden;
    margin: 4px 0;
  }
.theme-dark .progress-fill {
    height: 100%;
    width: 60%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6c63ff, #7a72ff);
    box-shadow: 0 0 8px rgba(108,99,255,0.8);
  }
  /* ── Bottom tab bar ── */
.theme-dark .tab-bar {
    flex-shrink: 0;
    height: calc(76px + var(--safe-area-bottom) + var(--tg-content-bottom, 0px));
    background: rgba(15,15,26,0.80);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    align-items: flex-start;
    padding-top: 8px;
    padding-bottom: calc(var(--safe-area-bottom) + var(--tg-content-bottom, 0px));
    --tab-count: 4;
  }
.theme-dark .tab-indicator {
    position: absolute;
    top: -1px;
    left: calc((var(--active-tab, 0) + 0.5) * (100% / var(--tab-count)));
    width: 20px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: #6c63ff;
    box-shadow: 0 0 8px rgba(108,99,255,0.8);
    transform: translateX(-50%);
    transition: left 0.38s cubic-bezier(0.34, 1.28, 0.64, 1);
    pointer-events: none;
    z-index: 2;
  }
.theme-dark .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding-top: 2px;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
.theme-dark .tab-icon {
    width: auto;
    min-width: 28px;
    height: 28px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.35, 0.64, 1);
  }
.theme-dark .tab-item.active .tab-icon { transform: scale(1.1); }
.theme-dark .tab-icon img {
    display: block;
    width: auto;
    height: auto;
    max-height: 26px;
    transition: opacity 0.2s ease;
  }
.theme-dark .tab-item[data-tab="practice"] .tab-icon img {
    max-height: 31px;
  }
.theme-dark .tab-label {
    font-size: 10px;
    font-weight: 500;
    color: #a0a0c0;
    font-family: 'Inter', sans-serif;
    transition: color 0.28s ease;
  }
.theme-dark .tab-item.active .tab-label { color: #6c63ff; }
.theme-dark .tab-panels { position: relative; }
.theme-dark .tab-panel:not(.is-active) {
    display: none;
  }
.theme-dark .tab-panel {
    transition: opacity 0.28s ease, transform 0.38s cubic-bezier(0.34, 1.1, 0.64, 1);
  }
.theme-dark .tab-panel.is-active {
    display: block;
  }
.theme-dark .tab-placeholder {
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 320px;
    justify-content: center;
  }
.theme-dark .tab-placeholder-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(108,99,255,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
  }
.theme-dark .tab-placeholder-icon img { width: auto; height: auto; max-height: 30px; }
.theme-dark .tab-placeholder-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
  }
.theme-dark .tab-placeholder-sub {
    font-size: 14px;
    color: #a0a0c0;
    line-height: 1.5;
    max-width: 260px;
  }


.theme-light *, .theme-light *::before, .theme-light *::after { box-sizing: border-box; margin: 0; padding: 0; }

.theme-light .app {
    width: 100%;
    max-width: var(--shell-content-max, 430px);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-right: var(--safe-area-right);
    padding-left: var(--safe-area-left);
  }
.theme-light .page-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(900px 600px at 80% -5%, rgba(232,230,255,0.9) 0%, transparent 60%),
                radial-gradient(700px 500px at 10% 40%, rgba(220,215,255,0.7) 0%, transparent 55%),
                linear-gradient(180deg, #f0f0fa 0%, #f8f8ff 100%);
  }
.theme-light .app > *:not(.page-gradient) {
    position: relative;
    z-index: 1;
  }
  /* ── Scrollable content ── */
.theme-light .scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: max(0px, calc(var(--safe-area-top) + var(--tg-header-offset) - var(--tg-top-trim))) 14px 14px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
.theme-light .scroll-area::-webkit-scrollbar { display: none; }
  /* ── Glass card base ── */
.theme-light .glass {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.80);
    border-radius: 16px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.50), 0 10px 40px rgba(80,70,160,0.18);
  }
  /* ── Top bar row ── */
.theme-light .top-controls {
    display: flex;
    gap: 8px;
    margin: var(--layout-gap) 0;
    align-items: center;
  }
.theme-light .search-pill {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.80);
    border-radius: 999px;
    padding: 0 14px;
    height: var(--top-control-height);
    backdrop-filter: blur(24px);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.50), 0 10px 40px rgba(80,70,160,0.12);
  }
.theme-light .search-pill svg { flex-shrink: 0; opacity: 0.55; }
.theme-light .search-pill span {
    font-size: 14px;
    color: #9090a0;
    font-family: 'Inter', sans-serif;
  }
.theme-light .flag-btn {
    height: var(--top-flag-height);
    width: auto;
    aspect-ratio: var(--flag-aspect);
    padding: 0; border: none; background: none;
    border-radius: 3px;
    display: flex;
    align-items: stretch;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
  }
.theme-light .flag-btn img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 3px;
    object-fit: cover;
  }
  /* ── Hero: mascot on background + 4 blocks on the right ── */
.theme-light .hero-section {
    display: grid;
    grid-template-columns: 32.5% 1fr;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 12px;
  }
.theme-light .hero-mascot {
    position: relative;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: auto;
    overflow: visible;
  }
.theme-light .hero-mascot-art {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 4px 16px rgba(108,99,255,0.28));
  }
.theme-light .hero-blocks {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px;
  }
.theme-light .hero-block {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }
.theme-light .hero-block-stat {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 16px;
    padding: 10px 12px 10px 14px;
    box-shadow: none;
  }
.theme-light .hero-block-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
  }
.theme-light .hero-block-streak {
    background: linear-gradient(135deg, rgba(13,148,136,0.10) 0%, rgba(255,255,255,0.92) 65%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 14px rgba(13,148,136,0.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
.theme-light .hero-block-streak::before {
    background: linear-gradient(180deg, #2dd4bf, #0d9488);
    box-shadow: none;
  }
.theme-light .hero-block-streak .hero-block-value {
    background: linear-gradient(135deg, #12122a 35%, #0f766e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
.theme-light .hero-block-streak .hero-block-sub {
    color: #0f766e;
  }
.theme-light .hero-block-balance {
    background: linear-gradient(135deg, rgba(37,99,235,0.09) 0%, rgba(255,255,255,0.92) 65%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 14px rgba(37,99,235,0.08);
  }
.theme-light .hero-block-balance::before {
    background: linear-gradient(180deg, #60a5fa, #2563eb);
    box-shadow: none;
  }
.theme-light .hero-block-balance .hero-block-label { color: #1d4ed8; }
.theme-light .hero-block-balance .hero-block-value {
    background: linear-gradient(135deg, #12122a 35%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
.theme-light .hero-block-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
.theme-light .hero-block-value {
    font-size: 28px;
    font-weight: 800;
    color: #12122a;
    letter-spacing: -1px;
    line-height: 1;
  }
.theme-light .hero-block-sub {
    font-size: 10px;
    line-height: 1.3;
    font-weight: 500;
  }
.theme-light .hero-block-comment {
    grid-column: 1 / -1;
  }
.theme-light .hero-comment {
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(18,18,42,0.75);
    font-weight: 500;
  }
.theme-light .hero-block-pro {
    grid-column: 1 / -1;
    padding: 0;
    background: none;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow: hidden;
    border-radius: 14px;
  }
.theme-light .pro-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border-radius: 14px;
    background-color: #5b52e0;
    box-shadow: 0 4px 18px rgba(108,99,255,0.32), 0 1px 3px rgba(80,70,160,0.12);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    border: 1px solid rgba(108,99,255,0.25);
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    clip-path: inset(0 round 14px);
    transition: transform 0.15s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.20);
    z-index: 0;
  }
.theme-light .pro-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.28) 0%,
      rgba(255,255,255,0.08) 30%,
      transparent 55%
    );
    pointer-events: none;
    z-index: 1;
    animation: pro-btn-gleam 5.6s ease-in-out infinite;
    animation-delay: var(--pro-gleam-delay, 0s);
  }
.theme-light .pro-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: var(--pro-gradient);
    background-size: 480% 480%;
    background-position: var(--pro-pos, 50% 50%);
    filter: blur(10px);
    transform: scale(1.6);
    transform-origin: center;
    z-index: 0;
    pointer-events: none;
  }
.theme-light .pro-btn-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 12%,
      rgba(255,255,255,0.025) 36%,
      rgba(255,255,255,0.09) 50%,
      rgba(255,255,255,0.025) 64%,
      transparent 88%
    );
    transform: translateX(-160%) skewX(-10deg);
    pointer-events: none;
    will-change: transform, opacity;
    z-index: 2;
    animation: pro-btn-shine-sweep 5.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
.theme-light .pro-btn-label {
    position: relative;
    z-index: 3;
  }
.theme-light .pro-btn:active { transform: scale(0.98); }
  /* ── Section cards ── */
.theme-light .section-card {
    margin-bottom: 12px;
  }
.theme-light .section-card:last-child {
    margin-bottom: 0;
  }
.theme-light .card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
.theme-light .card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
.theme-light .card-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
.theme-light .card-icon svg { display: block; width: 20px; height: 20px; }
.theme-light .card-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.theme-light .card-title {
    font-size: 17px;
    font-weight: 700;
    color: #12122a;
    letter-spacing: -0.3px;
    line-height: 1.2;
  }
.theme-light .card-subtitle {
    font-size: 13px;
    color: #4a4a6a;
    line-height: 1.5;
  }
.theme-light .card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7a72ff, #6c63ff);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    width: 100%;
    border: none;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 16px rgba(108,99,255,0.4);
    margin-top: 4px;
    transition: opacity 0.15s;
  }
.theme-light .card-btn:active { opacity: 0.8; }
  /* ── Progress bar ── */
.theme-light .progress-track {
    height: 4px;
    background: rgba(0,0,0,0.08);
    border-radius: 999px;
    overflow: hidden;
    margin: 4px 0;
  }
.theme-light .progress-fill {
    height: 100%;
    width: 60%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6c63ff, #7a72ff);
    box-shadow: 0 0 8px rgba(108,99,255,0.8);
  }
  /* ── Bottom tab bar ── */
.theme-light .tab-bar {
    flex-shrink: 0;
    height: calc(76px + var(--safe-area-bottom) + var(--tg-content-bottom, 0px));
    background: rgba(255,255,255,0.80);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-top: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: flex-start;
    padding-top: 8px;
    padding-bottom: calc(var(--safe-area-bottom) + var(--tg-content-bottom, 0px));
    --tab-count: 4;
  }
.theme-light .tab-indicator {
    position: absolute;
    top: -1px;
    left: calc((var(--active-tab, 0) + 0.5) * (100% / var(--tab-count)));
    width: 20px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: #6c63ff;
    box-shadow: 0 0 8px rgba(108,99,255,0.55);
    transform: translateX(-50%);
    transition: left 0.38s cubic-bezier(0.34, 1.28, 0.64, 1);
    pointer-events: none;
    z-index: 2;
  }
.theme-light .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding-top: 2px;
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
.theme-light .tab-icon {
    width: auto;
    min-width: 28px;
    height: 28px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.35, 0.64, 1);
  }
.theme-light .tab-item.active .tab-icon { transform: scale(1.1); }
.theme-light .tab-icon img {
    display: block;
    width: auto;
    height: auto;
    max-height: 26px;
    transition: opacity 0.2s ease;
  }
.theme-light .tab-item[data-tab="practice"] .tab-icon img {
    max-height: 31px;
  }
.theme-light .tab-label {
    font-size: 10px;
    font-weight: 500;
    color: #9090a0;
    font-family: 'Inter', sans-serif;
    transition: color 0.28s ease;
  }
.theme-light .tab-item.active .tab-label { color: #6c63ff; }
.theme-light .tab-panels { position: relative; }
.theme-light .tab-panel:not(.is-active) {
    display: none;
  }
.theme-light .tab-panel {
    transition: opacity 0.28s ease, transform 0.38s cubic-bezier(0.34, 1.1, 0.64, 1);
  }
.theme-light .tab-panel.is-active {
    display: block;
  }
.theme-light .tab-placeholder {
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 320px;
    justify-content: center;
  }
.theme-light .tab-placeholder-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(108,99,255,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
  }
.theme-light .tab-placeholder-icon img { width: auto; height: auto; max-height: 30px; }
.theme-light .tab-placeholder-title {
    font-size: 20px;
    font-weight: 700;
    color: #12122a;
    letter-spacing: -0.3px;
  }
.theme-light .tab-placeholder-sub {
    font-size: 14px;
    color: #4a4a6a;
    line-height: 1.5;
    max-width: 260px;
  }

  /* ── Word Search overlay (Word Search Flow Flat) ── */
  .search-layer:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .search-layer .search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--layout-gap) 14px 10px;
    flex-shrink: 0;
  }
  .search-layer .search-pill {
    flex: 1;
    height: 42px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 8px;
  }
  .theme-dark .search-layer .search-pill {
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(108,99,255,0.65);
    box-shadow: 0 0 0 3px rgba(108,99,255,0.16), inset 0 1px 1px rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .theme-light .search-layer .search-pill {
    background: rgba(255,255,255,0.80);
    border: 1.5px solid rgba(108,99,255,0.55);
    box-shadow: 0 0 0 3px rgba(108,99,255,0.10), inset 0 1px 1px rgba(255,255,255,0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
  .theme-dark .search-layer .search-pill svg { flex-shrink: 0; opacity: 0.45; color: #a0a0c0; }
  .theme-light .search-layer .search-pill svg { flex-shrink: 0; opacity: 0.55; color: #6060a0; }
  .search-layer .pill-text {
    font-size: 15px;
    font-weight: 400;
    flex: 1;
    line-height: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
  }
  .theme-dark .search-layer .pill-text { color: #fff; }
  .theme-light .search-layer .pill-text { color: #12122a; }
  .theme-dark .search-layer .pill-text::placeholder { color: #5a5a7a; opacity: 1; }
  .theme-light .search-layer .pill-text::placeholder { color: #9090a0; opacity: 1; }
  .search-layer .cancel-btn {
    font-size: 15px;
    font-weight: 400;
    color: #a0a0c0;
    white-space: nowrap;
    flex-shrink: 0;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
  }
  .search-layer .search-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .search-layer .results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 14px 14px;
  }
  .search-layer .rcard {
    border-radius: 16px;
    padding: 11px 14px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
  }
  .theme-dark .search-layer .rcard {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
  .theme-light .search-layer .rcard {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(255,255,255,0.95);
    box-shadow: 0 4px 14px rgba(80,70,160,0.09);
  }
  .search-layer .rcard-word {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
  }
  .theme-dark .search-layer .rcard-word { color: #e8e8ff; }
  .theme-light .search-layer .rcard-word { color: #12122a; }
  .search-layer .rcard-trans {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 1px;
  }
  .theme-dark .search-layer .rcard-trans { color: #b8b2ff; }
  .theme-light .search-layer .rcard-trans { color: #4b43c9; }
  .search-layer .empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 32px 24px;
    text-align: center;
    min-height: 280px;
  }
  .search-layer .empty-icon { opacity: 0.30; color: #6c63ff; flex-shrink: 0; }
  .search-layer .empty-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
  .theme-dark .search-layer .empty-title { color: #fff; }
  .theme-light .search-layer .empty-title { color: #12122a; }
  .search-layer .empty-sub { font-size: 14px; line-height: 1.55; max-width: 260px; margin-top: 2px; }
  .theme-dark .search-layer .empty-sub { color: #a0a0c0; }
  .theme-light .search-layer .empty-sub { color: #6060a0; }
  .search-layer .add-btn {
    margin-top: 10px;
    padding: 13px 28px;
    border-radius: 24px;
    background: #6c63ff;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: 0 8px 24px rgba(108,99,255,0.42);
    border: none;
    font-family: inherit;
    cursor: pointer;
  }