.bottom-nav {
      position: relative;
      width: 100%;
      flex: 0 0 auto;
      margin-top: auto;
      padding: 6px 0 calc(14px + var(--bottom-nav-safe-bottom));
      z-index: var(--layer-floating);
      overflow: visible;
      transition: opacity 0.18s ease;
      opacity: 1;
    }

    .is-standalone-pwa .bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      width: min(500px, calc(100vw - 14px));
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      bottom: 0;
      padding-top: 0;
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    }

    body.is-keyboard-open .bottom-nav {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }

    .bottom-nav-inner {
      pointer-events: auto;
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 4px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.12), transparent 42%),
        radial-gradient(circle at 15% 20%, rgba(141, 124, 255, 0.12), transparent 30%),
        radial-gradient(circle at 85% 24%, rgba(82, 215, 255, 0.10), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
        rgba(11, 13, 26, 0.74);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 32px;
      padding: 8px 8px 10px;
      backdrop-filter: blur(34px) saturate(140%);
      -webkit-backdrop-filter: blur(34px) saturate(140%);
      box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.46),
        0 8px 18px rgba(5, 8, 18, 0.20),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255,255,255,0.03);
      overflow: visible;
      isolation: isolate;
    }

    .bottom-nav-inner::before {
      content: '';
      position: absolute;
      left: 10px;
      right: 10px;
      top: 8px;
      height: 32%;
      border-radius: 24px 24px 18px 18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.03));
      opacity: 0.55;
      pointer-events: none;
      filter: blur(0.2px);
    }

    .bottom-nav-inner::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 32px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 20%),
        radial-gradient(circle at 50% 100%, rgba(141, 124, 255, 0.16), transparent 44%);
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .tab-btn {
      appearance: none;
      border: none;
      background: transparent;
      color: rgba(235, 240, 255, 0.58);
      border-radius: 20px;
      padding: 8px 4px 9px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      cursor: pointer;
      min-height: 48px;
      transition: background 0.18s, color 0.18s, transform 0.18s, box-shadow 0.18s, border-color 0.18s;
      -webkit-tap-highlight-color: transparent;
      position: relative;
      z-index: 1;
    }

    .tab-btn:active { transform: translateY(1px); }

    .tab-btn.active {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        rgba(141, 124, 255, 0.10);
      border: 1px solid rgba(255,255,255,0.07);
      color: #fff;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 10px 22px rgba(5, 8, 18, 0.14);
      transform: translateY(-1px);
    }

    .tab-btn.center {
      z-index: calc(var(--layer-floating) + 1);
      position: absolute;
      left: 50%;
      bottom: 34px;
      transform: translateX(-50%);
      width: 64px;
      height: 64px;
      padding: 0;
      margin: 0;
      background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,0.34), transparent 34%),
        linear-gradient(145deg, #8d7cff 0%, #ea72ff 100%);
      color: #fff;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16),
        0 18px 36px rgba(141, 124, 255, 0.42),
        0 0 28px rgba(234, 114, 255, 0.26),
        inset 0 1px 0 rgba(255,255,255,0.18);
      border-radius: 22px;
      overflow: visible;
    }

    .tab-btn.center:active { transform: translateX(-50%) translateY(1px) scale(0.985); }

    .tab-btn.center::before {
      content: '';
      position: absolute;
      inset: -22px;
      border-radius: 28px;
      background: radial-gradient(circle, rgba(141, 124, 255, 0.48) 0%, rgba(234, 114, 255, 0.18) 42%, transparent 72%);
      filter: blur(18px);
      z-index: -1;
      pointer-events: none;
    }

    .tab-btn.center::after {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.02)),
        radial-gradient(circle at 50% 24%, rgba(255,255,255,0.18), transparent 42%);
      pointer-events: none;
      opacity: 0.72;
    }

    .tab-icon {
      font-size: 17px;
      line-height: 1;
      position: relative;
      z-index: 1;
    }

    .tab-icon svg {
      width: 20px;
      height: 20px;
      display: block;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .tab-btn.center .tab-icon {
      font-size: 32px;
      font-weight: 900;
      text-shadow: 0 0 18px rgba(255, 255, 255, 0.8);
    }

    .tab-btn.center .tab-label {
      display: none;
    }

    .tab-label {
      font-size: 9.5px;
      line-height: 1.1;
      font-weight: 700;
      letter-spacing: 0.18px;
      position: relative;
      z-index: 1;
    }