/* ═══════════════════════════════════════════════════════════════════════
       COMMON HEADER
       ═══════════════════════════════════════════════════════════════════════ */
    .app-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      padding-top: calc(var(--safe-top) + 12px);
      flex-shrink: 0;
      z-index: 10;
    }
    .app-header__logo {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }
    .app-header__actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .premium-btn {
      position: relative;
      isolation: isolate;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 7px 12px;
      border-radius: var(--radius-full);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        linear-gradient(120deg, rgba(243,214,164,0.12), rgba(156,183,255,0.08) 48%, rgba(255,141,161,0.14));
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 24px rgba(0,0,0,0.28);
      font-size: 12px;
      font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .premium-btn::before {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(120deg, rgba(255,255,255,0.12), transparent 36%, rgba(255,255,255,0.1) 62%, transparent 78%);
      opacity: 0.72;
      z-index: -2;
    }
    .premium-btn::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -45%;
      width: 52%;
      height: 200%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.26), transparent);
      transform: rotate(18deg);
      animation: premium-shimmer 3.2s ease-in-out infinite;
      opacity: 0.7;
      z-index: -1;
      pointer-events: none;
    }
    .premium-btn:hover,
    .premium-btn:active {
      transform: translateY(-1px);
      border-color: rgba(243,214,164,0.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 28px rgba(0,0,0,0.32), 0 0 0 1px rgba(243,214,164,0.08);
    }
    .premium-btn__accent {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255,141,161,0.25), rgba(243,214,164,0.28));
      color: #fff4d9;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
      flex-shrink: 0;
    }
    .premium-btn__label {
      position: relative;
      z-index: 1;
      letter-spacing: -0.01em;
    }
    .premium-btn.is-vip-active {
      background:
        linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)),
        linear-gradient(120deg, rgba(243,214,164,0.2), rgba(156,183,255,0.11));
      border-color: rgba(243,214,164,0.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 30px rgba(243,214,164,0.14);
    }
    .premium-btn.is-vip-active .premium-btn__accent {
      min-width: 22px;
      width: 22px;
      padding: 0;
      background: linear-gradient(135deg, rgba(243,214,164,0.32), rgba(255,141,161,0.26));
    }
    .premium-btn--chat {
      min-height: 28px;
      padding: 4px 10px;
      gap: 6px;
      border-color: rgba(255,255,255,0.1);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        linear-gradient(120deg, rgba(243,214,164,0.1), rgba(255,141,161,0.12));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 20px rgba(0,0,0,0.22);
    }
    .premium-btn--chat .premium-btn__accent {
      min-width: 20px;
      width: 20px;
      height: 20px;
      padding: 0;
      font-size: 9px;
    }
    .premium-btn--chat .premium-btn__label {
      font-size: 11px;
      font-weight: 700;
    }
    @keyframes premium-shimmer {
      0% { transform: translateX(-140%) rotate(18deg); opacity: 0; }
      20% { opacity: 0.62; }
      60% { opacity: 0.38; }
      100% { transform: translateX(320%) rotate(18deg); opacity: 0; }
    }
    .user-avatar-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }
    .user-avatar-btn img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .user-avatar-btn.is-vip {
      box-shadow: 0 0 0 1px rgba(243,214,164,0.34), 0 0 24px rgba(255,166,190,0.18);
    }
    .user-avatar-btn.is-vip::after {
      content: 'VIP';
      position: absolute;
      right: -6px;
      bottom: -3px;
      height: 15px;
      padding: 0 5px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--vip-champagne), var(--vip-rose));
      color: #111;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px rgba(0,0,0,0.34);
    }