@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@400;600;800;900&display=swap');

    :root {
      /* ── Cosmic palette ── */
      --cosmic-0: #04010F;
      --cosmic-1: #0D0629;
      --cosmic-2: #18094A;
      --nebula-pur: rgba(90, 30, 160, 0.35);
      --nebula-blu: rgba(20, 60, 160, 0.20);
      --gold: #C9A456;
      --gold-bright: #ECC85A;
      --gold-dim: rgba(201, 164, 86, 0.25);
      --gold-border: rgba(201, 164, 86, 0.45);

      /* ── Per-tab accent (overridden by switchTab) ── */
      --accent: #00C9A7;
      --accent-glow: rgba(0, 201, 167, 0.22);
      --accent-dim: rgba(0, 201, 167, 0.10);
      --accent-text: #00E8C2;

      /* ── Legacy aliases kept so JS still works ── */
      --neon-indigo: #6366F1;
      --neon-pink: #d85c8a;
      --neon-lime: #84CC16;
      --bg-deep: var(--cosmic-0);
      --text-white: #FFFFFF;
      --glass-bg: rgba(255, 255, 255, 0.03);
      --glass-border: rgba(255, 255, 255, 0.09);
      --ease: cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* ── RESET + BASE ── */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
    }

    body {
      background: var(--cosmic-0);
      background:
        radial-gradient(ellipse 80% 50% at 20% 80%, var(--nebula-pur) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 10%, var(--nebula-blu) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 10% 10%, rgba(0, 180, 160, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 100% 60% at 50% 50%, var(--cosmic-2) 0%, transparent 70%),
        var(--cosmic-0);
      color: var(--text-white);
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      line-height: 1.5;
      min-height: 100vh;
    }

    /* ── STARFIELD ── */
    body::before,
    body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 1px;
      height: 1px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }

    body::before {
      box-shadow: 229px 26px rgba(255, 255, 255, 0.64), 502px 229px rgba(255, 255, 255, 0.28), 210px 693px rgba(255, 255, 255, 0.64), 1117px 90px rgba(255, 255, 255, 0.55), 66px 31px rgba(255, 255, 255, 0.26), 477px 518px rgba(255, 255, 255, 0.56), 1150px 204px rgba(255, 255, 255, 0.63), 1117px 430px rgba(255, 255, 255, 0.33), 570px 829px rgba(255, 255, 255, 0.72), 327px 715px rgba(255, 255, 255, 0.45), 570px 160px rgba(255, 255, 255, 0.33), 690px 105px rgba(255, 255, 255, 0.26), 199px 368px rgba(255, 255, 255, 0.71), 542px 827px rgba(255, 255, 255, 0.23), 941px 550px rgba(255, 255, 255, 0.27), 776px 81px rgba(255, 255, 255, 0.53), 741px 592px rgba(255, 255, 255, 0.32), 143px 47px rgba(255, 255, 255, 0.6), 593px 82px rgba(255, 255, 255, 0.71), 207px 390px rgba(255, 255, 255, 0.37), 748px 167px rgba(255, 255, 255, 0.42), 430px 687px rgba(255, 255, 255, 0.36), 147px 624px rgba(255, 255, 255, 0.58), 1094px 747px rgba(255, 255, 255, 0.35), 947px 389px rgba(255, 255, 255, 0.36), 1141px 225px rgba(255, 255, 255, 0.61), 115px 235px rgba(255, 255, 255, 0.69), 647px 411px rgba(255, 255, 255, 0.36), 433px 581px rgba(255, 255, 255, 0.73), 645px 218px rgba(255, 255, 255, 0.59), 811px 659px rgba(255, 255, 255, 0.48), 543px 143px rgba(255, 255, 255, 0.35), 1150px 552px rgba(255, 255, 255, 0.36), 1198px 439px rgba(255, 255, 255, 0.74), 818px 371px rgba(255, 255, 255, 0.33), 284px 522px rgba(255, 255, 255, 0.5), 97px 882px rgba(255, 255, 255, 0.27), 328px 812px rgba(255, 255, 255, 0.61), 131px 395px rgba(255, 255, 255, 0.43), 959px 542px rgba(255, 255, 255, 0.35), 1134px 882px rgba(255, 255, 255, 0.77), 235px 699px rgba(255, 255, 255, 0.73), 547px 788px rgba(255, 255, 255, 0.58), 229px 301px rgba(255, 255, 255, 0.46), 930px 4px rgba(255, 255, 255, 0.77), 540px 513px rgba(255, 255, 255, 0.66), 1040px 109px rgba(255, 255, 255, 0.72), 612px 862px rgba(255, 255, 255, 0.58), 408px 157px rgba(255, 255, 255, 0.42), 331px 553px rgba(255, 255, 255, 0.77), 1087px 1px rgba(255, 255, 255, 0.56), 1001px 20px rgba(255, 255, 255, 0.27), 744px 900px rgba(255, 255, 255, 0.79), 630px 246px rgba(255, 255, 255, 0.23), 1162px 81px rgba(255, 255, 255, 0.25), 996px 836px rgba(255, 255, 255, 0.24), 1091px 785px rgba(255, 255, 255, 0.28), 974px 563px rgba(255, 255, 255, 0.3), 1081px 894px rgba(255, 255, 255, 0.56), 434px 553px rgba(255, 255, 255, 0.65), 412px 731px rgba(255, 255, 255, 0.39), 765px 449px rgba(255, 255, 255, 0.74), 925px 124px rgba(255, 255, 255, 0.35), 132px 347px rgba(255, 255, 255, 0.21), 1135px 236px rgba(255, 255, 255, 0.55), 15px 73px rgba(255, 255, 255, 0.62), 121px 235px rgba(255, 255, 255, 0.24), 65px 881px rgba(255, 255, 255, 0.4), 1053px 244px rgba(255, 255, 255, 0.37), 995px 220px rgba(255, 255, 255, 0.52), 1170px 591px rgba(255, 255, 255, 0.48), 969px 827px rgba(255, 255, 255, 0.44), 194px 100px rgba(255, 255, 255, 0.6), 726px 434px rgba(255, 255, 255, 0.45), 111px 690px rgba(255, 255, 255, 0.59), 202px 63px rgba(255, 255, 255, 0.44), 695px 820px rgba(255, 255, 255, 0.72), 510px 197px rgba(255, 255, 255, 0.31), 919px 144px rgba(255, 255, 255, 0.45), 571px 474px rgba(255, 255, 255, 0.35);
      animation: twinkle1 100s ease-in-out infinite;
    }

    body::after {
      box-shadow: 155px 454px rgba(255, 255, 255, 0.9), 1128px 101px rgba(255, 255, 255, 0.53), 1108px 857px rgba(255, 255, 255, 0.51), 192px 772px rgba(255, 255, 255, 0.92), 341px 417px rgba(255, 255, 255, 0.74), 438px 886px rgba(255, 255, 255, 0.7), 121px 169px rgba(255, 255, 255, 0.69), 800px 272px rgba(255, 255, 255, 0.96), 932px 293px rgba(255, 255, 255, 0.71), 1139px 678px rgba(255, 255, 255, 0.86), 318px 195px rgba(255, 255, 255, 0.65), 120px 594px rgba(255, 255, 255, 0.87), 125px 766px rgba(255, 255, 255, 0.66), 103px 599px rgba(255, 255, 255, 0.74), 1088px 162px rgba(255, 255, 255, 0.53), 1041px 83px rgba(255, 255, 255, 0.93), 141px 610px rgba(255, 255, 255, 0.53), 482px 414px rgba(255, 255, 255, 0.56), 1167px 253px rgba(255, 255, 255, 0.79), 82px 635px rgba(255, 255, 255, 0.54), 1196px 579px rgba(255, 255, 255, 0.76), 535px 210px rgba(255, 255, 255, 0.83), 644px 245px rgba(255, 255, 255, 0.63), 269px 688px rgba(255, 255, 255, 0.82), 937px 324px rgba(255, 255, 255, 0.96);
      animation: twinkle2 120s ease-in-out infinite;
    }

    @keyframes twinkle1 {
      0% {
        opacity: 0.6;
        transform: translate(0, 0);
      }

      50% {
        opacity: 1.0;
        transform: translate(-4px, -6px);
      }

      100% {
        opacity: 0.6;
        transform: translate(0, 0);
      }
    }

    @keyframes twinkle2 {
      0% {
        opacity: 0.8;
        transform: translate(0, 0);
      }

      50% {
        opacity: 0.4;
        transform: translate(5px, -3px);
      }

      100% {
        opacity: 0.8;
        transform: translate(0, 0);
      }
    }

    /* ── HEADER ── */
    .sticky-header {
      position: sticky;
      top: 0;
      z-index: 9999;
      background-color: rgba(4, 1, 15, 0.85);
      background-image:
        radial-gradient(1px 1px at 10% 20%, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 30% 60%, #eee, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 50% 30%, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 70% 80%, #ddd, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 90% 10%, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 20% 80%, #ccc, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 80% 40%, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(circle at 10% 40%, rgba(99, 102, 241, 0.25), transparent 40%),
        radial-gradient(circle at 90% 60%, rgba(236, 72, 153, 0.25), transparent 40%);
      background-size: 100px 100px, 150px 150px, 200px 200px, 120px 120px, 180px 180px, 140px 140px, 170px 170px, 100% 100%, 100% 100%;
      backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--gold-dim);
      padding: 8px 16px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
    }

    .header-top {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 1300px;
      margin-bottom: 8px;
    }

    .header-top h1 {
      font-family: 'Cinzel', serif;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 4px;
      color: var(--accent-text);
      text-shadow: 0 0 20px var(--accent-glow);
      transition: color 0.5s ease, text-shadow 0.5s ease;
    }

    .energy-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: 1px solid var(--gold-border);
      color: var(--gold);
      padding: 6px 16px;
      border-radius: 50px;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 2px;
    }

    .energy-badge::before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 8px var(--accent);
      transition: background 0.5s ease, box-shadow 0.5s ease;
    }

    /* ── TAB BAR ── */
    .tab-bar {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 12px;
      max-width: 1300px;
      width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 0;
      justify-content: flex-start;
      margin: 0 auto;
      padding-left: 20px;
      padding-right: 20px;
    }
    @media (min-width: 768px) {
      .tab-bar {
        justify-content: center;
      }
    }

    .tab-bar::-webkit-scrollbar {
      display: none;
    }

    .tab-btn {
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      padding: 12px 28px;
      background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(0,0,0,0.7)) !important;
      border: 1px solid rgba(255,255,255,0.1) !important;
      border-top: 1px solid rgba(255,255,255,0.3) !important;
      border-radius: 10px 10px 0 0 !important;
      box-shadow: 
        inset 0 4px 10px rgba(255,255,255,0.15), 
        inset 0 -4px 10px rgba(0,0,0,0.6), 
        0 6px 15px rgba(0,0,0,0.7) !important;
      color: rgba(255, 255, 255, 0.4);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      white-space: nowrap;
      position: relative;
      z-index: 1;
      backdrop-filter: blur(8px);
      transform: translateY(0);
    }

    .tab-btn:hover {
      color: rgba(255, 255, 255, 0.9);
      background: linear-gradient(145deg, rgba(255,255,255,0.18), rgba(0,0,0,0.5)) !important;
      transform: translateY(-2px) scale(1.02);
      box-shadow: 
        inset 0 4px 12px rgba(255,255,255,0.25), 
        inset 0 -4px 10px rgba(0,0,0,0.5), 
        0 8px 20px rgba(0,0,0,0.8) !important;
    }

    .tab-btn.active {
      color: var(--gold-bright);
      background: linear-gradient(145deg, rgba(240,192,96,0.15), rgba(139,105,20,0.5)) !important;
      border-color: rgba(240,192,96,0.6) !important;
      border-top: 1px solid rgba(255,255,255,0.5) !important;
      transform: translateY(-4px) scale(1.04);
      box-shadow: 
        inset 0 4px 15px rgba(255,255,255,0.3), 
        inset 0 -4px 15px rgba(139,105,20,0.6), 
        0 12px 25px rgba(0,0,0,0.9),
        0 0 15px rgba(240,192,96,0.2) !important;
      z-index: 2;
    }

    /* ── MAIN CONTAINER ── */
    .panels-container {
      padding: 16px 16px 120px;
      max-width: 1300px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .panel {
      display: none;
      animation: popIn 0.6s var(--ease) forwards;
    }

    .panel.active {
      display: block;
    }

    @keyframes popIn {
      from {
        opacity: 0;
        transform: translateY(16px);
      }

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

    /* ── AVATAR ── */
    @keyframes avatarPulse {

      0%,
      100% {
        transform: scale(1);
        box-shadow: 0 0 30px var(--accent-glow);
      }

      50% {
        transform: scale(1.05);
        box-shadow: 0 0 60px var(--accent-glow);
      }
    }

    .avatar-talking {
      animation: avatarPulse 1.5s infinite ease-in-out;
    }

    @keyframes hologramSpinClockwise {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes hologramSpinCounterClockwise {
      from { transform: rotate(360deg); }
      to { transform: rotate(0deg); }
    }

    @keyframes hologramBreathe {
      0% { transform: scale(0.92); opacity: 0.6; }
      100% { transform: scale(1.08); opacity: 1; }
    }

    @keyframes hologramBar {
      0% { transform: scaleY(0.15); }
      100% { transform: scaleY(1); }
    }

    .hologram-avatar {
      width: 100%;
      height: 100%;
      mix-blend-mode: normal !important;
    }

    .avatar-subtitles {
      width: 100%;
      text-align: center;
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--accent-text);
      text-shadow: 0 0 12px var(--accent-glow);
      font-size: 1rem;
      line-height: 1.5;
      padding-top: 20px;
      transition: color 0.5s ease;
    }

    .box-title {
      font-family: 'Cinzel', serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--gold-bright);
      letter-spacing: 4px;
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 28px;
      position: relative;
      padding-bottom: 16px;
      text-shadow: 0 0 20px rgba(201, 164, 86, 0.5);
    }

    .box-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
      border-radius: 2px;
    }

    /* -- BENTO / CARD BOXES -- */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .bento-box {
      background: rgba(8, 3, 30, 0.9);
      background-image: none !important;
      border: 1px solid rgba(201, 164, 86, 0.4);
      backdrop-filter: blur(20px);
      border-radius: 16px;
      padding: 36px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: visible;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
      box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(201, 164, 86, 0.06);
    }

    .bento-box:hover {
      border-color: rgba(201, 164, 86, 0.7);
      box-shadow: 0 8px 50px rgba(201, 164, 86, 0.15), 0 0 0 1px rgba(201, 164, 86, 0.25);
    }

    /* Ornate corner flourishes removed for iOS aesthetics */

    /* Extra corners using box shadow trick */
    .bento-box .bento-corner-tr,
    .bento-box .bento-corner-bl {
      display: none;
    }

    .bento-box.full {
      grid-column: span 2;
    }

    /* ── INPUTS / SELECTS ── */
    .label-vibrant {
      font-size: 0.7rem;
      font-weight: 800;
      color: rgba(201, 164, 86, 0.7);
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 10px;
      display: block;
    }

    textarea,
    select,
    input[type="date"],
    input[type="text"] {
      width: 100%;
      background: rgba(4, 1, 20, 0.8);
      border: 1px solid rgba(201, 164, 86, 0.35);
      border-radius: 12px;
      padding: 16px 20px;
      color: rgba(255, 255, 255, 0.9);
      font-family: 'Inter', sans-serif;
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.3px;
      outline: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      -webkit-appearance: none;
      appearance: none;
    }

    textarea:focus,
    select:focus,
    input:focus {
      border-color: var(--gold-bright);
      box-shadow: 0 0 0 2px rgba(201, 164, 86, 0.2), 0 0 20px rgba(201, 164, 86, 0.1);
    }

    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A456' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      padding-right: 44px;
      cursor: pointer;
    }

    select option {
      color: #111;
      background: #fff;
      font-family: sans-serif;
    }

    textarea::placeholder {
      color: rgba(255, 255, 255, 0.2);
    }

    /* -- MAIN CTA BUTTON -- */
    .btn-reveal {
      width: 100%;
      padding: 22px;
      background: linear-gradient(135deg, #8B6914 0%, #C9A456 30%, #ECC85A 50%, #C9A456 70%, #8B6914 100%);
      color: #1A0B00;
      font-family: 'Cinzel', serif;
      font-weight: 900;
      font-size: 1rem;
      border-radius: 6px;
      border: 1px solid var(--gold-bright);
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 5px;
      box-shadow: 0 4px 30px rgba(201, 164, 86, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
      position: relative;
      overflow: hidden;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .btn-reveal::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
      transform: skewX(-20deg);
      transition: left 0.5s ease;
    }

    .btn-reveal:hover::before {
      left: 160%;
    }

    .btn-reveal:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 40px rgba(201, 164, 86, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .btn-reveal span {
      position: relative;
      z-index: 1;
    }

    /* ── UPLOAD AREA ── */
    .upload-area {
      background: rgba(4, 1, 20, 0.6) !important;
      border: 2px dashed var(--gold-dim) !important;
      transition: border-color 0.3s ease, background 0.3s ease;
    }

    .upload-area:hover {
      border-color: var(--accent) !important;
      background: rgba(0, 201, 167, 0.05) !important;
    }

    /* ── AVATAR STAGE ── */
    .avatar-stage {
      width: 100%;
      aspect-ratio: 1/1;
      max-width: 260px;
      margin: 16px auto;
      border-radius: 50%;
      overflow: hidden;
      border: 3px solid var(--gold-dim);
      box-shadow: 0 0 40px var(--accent-glow);
      transition: border-color 0.5s, box-shadow 0.5s;
    }

    .avatar-face {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .avatar-face img,
    .avatar-face video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      mix-blend-mode: multiply; /* Eliminates white/light-gray backgrounds completely */
    }

    /* ── GRID LAYOUTS ── */
    .decode-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 16px;
      margin-top: 20px;
    }

    .decode-thumb {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 14px;
      border: 1px solid var(--gold-dim);
    }

    .responsive-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .responsive-grid-large {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 36px;
    }

    /* ── VAULT CARDS (preserved) ── */
    .vault-card {
      background: rgba(13, 6, 41, 0.75);
      border: 1px solid var(--gold-dim);
      border-radius: 20px;
      overflow: hidden;
      transition: border-color 0.3s ease, transform 0.2s ease;
    }

    .vault-card:hover {
      border-color: var(--gold-border);
      transform: translateY(-2px);
    }

    .vault-card-header {
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border-bottom: 1px solid var(--gold-dim);
    }

    .vault-badge {
      font-size: 0.68rem;
      font-weight: 900;
      letter-spacing: 2px;
      padding: 5px 13px;
      border-radius: 50px;
      text-transform: uppercase;
      flex-shrink: 0;
    }

    .vault-badge.type-situation {
      background: rgba(0, 201, 167, 0.15);
      color: #00E8C2;
      border: 1px solid rgba(0, 201, 167, 0.3);
    }

    .vault-badge.type-interpretation {
      background: rgba(236, 72, 153, 0.15);
      color: #F472B6;
      border: 1px solid rgba(236, 72, 153, 0.3);
    }

    .vault-badge.type-yesno {
      background: rgba(201, 164, 86, 0.15);
      color: var(--gold-bright);
      border: 1px solid var(--gold-dim);
    }

    .vault-date {
      font-size: 0.7rem;
      color: rgba(255, 255, 255, 0.3);
      font-weight: 600;
    }

    .vault-copy-btn {
      background: none;
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.35);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s ease;
    }

    .vault-copy-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
    }

    .vault-card-body {
      padding: 22px;
    }

    .vault-question {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .vault-question::before {
      content: '';
      display: block;
      width: 3px;
      height: 12px;
      border-radius: 2px;
      background: currentColor;
      flex-shrink: 0;
    }

    .vault-revelation {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.8;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 16px;
    }

    .vault-logic {
      font-size: 0.8rem;
      font-style: italic;
      color: rgba(255, 255, 255, 0.35);
      padding: 10px 14px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 10px;
      border-left: 3px solid var(--gold-dim);
      line-height: 1.6;
    }

    /* ── FREQUENCY / SLOTS ── */
    @keyframes pulseWave {
      0% {
        transform: scaleY(1);
        opacity: 0.3;
      }

      50% {
        transform: scaleY(1.8);
        opacity: 0.8;
      }

      100% {
        transform: scaleY(1);
        opacity: 0.3;
      }
    }

    /* ── RESPONSIVE + iPHONE ── */
    /* ── LABEL SWITCHING: full labels on wide screens, short on iPhone ── */
    /* Default: show full, hide short */
    .tab-label-short {
      display: none;
    }

    .tab-label-full {
      display: inline;
    }

    /* Header logo branding */
    .header-logo-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .header-logo {
      max-height: 44px;
      width: auto;
      object-fit: contain;
      object-position: center center;
      background: transparent;
      border: none;
      flex-shrink: 0;
      animation: etherealFloat 8s ease-in-out infinite;
      mix-blend-mode: screen; /* Removes black background */
    }

    @keyframes etherealFloat {

      0%,
      100% {
        transform: translateY(0px) scale(1);
      }

      50% {
        transform: translateY(-4px) scale(1.02);
      }
    }

    .header-brand {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    @keyframes sweepGleam {

      0%,
      80% {
        background-position: 100% 0;
      }

      100% {
        background-position: 0% 0;
      }
    }

    .header-brand h1 {
      font-family: 'Cinzel', serif;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 4px;
      background: linear-gradient(110deg, #808A96 40%, #FFFFFF 48%, #FFFFFF 52%, #808A96 60%);
      background-size: 300% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 10px rgba(180, 190, 205, 0.4);
      animation: sweepGleam 5s linear infinite;
      line-height: 1;
    }

    /* Desktop symmetric grid: input boxes sit side-by-side as equal columns */
    @media (min-width: 769px) {
      .sym-half {
        grid-column: span 1 !important;
        /* override .full on desktop */
      }

      /* Force internal content to single-column when box is half-width */
      .sym-half .responsive-grid,
      .sym-half .responsive-grid-large {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      /* Equal min-height so paired boxes are always the same height */
      .bento-grid {
        align-items: stretch;
      }

      .sym-half {
        display: flex;
        flex-direction: column;
      }
    }

    /* ≤430px: ALL iPhones (SE 1st → Pro Max) — swap to short labels */
    /* Desktop: wider, more breathing room in tabs */
    @media (min-width: 769px) {
      .tab-btn {
        padding: 12px 32px;
        font-size: 0.82rem;
        letter-spacing: 2.5px;
      }

      .header-logo {
        max-height: 44px;
        width: auto;
      }

      .header-brand h1 {
        font-size: 1.55rem;
        letter-spacing: 6px;
      }
    }

    @media (max-width: 430px) {
      .tab-label-full {
        display: none;
      }

      .tab-label-short {
        display: inline;
      }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      .bento-grid {
        grid-template-columns: 1fr;
      }

      .responsive-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .responsive-grid-large {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .bento-box {
        padding: 20px;
      }

      .btn-reveal {
        padding: 18px;
        font-size: 1rem;
      }

      .header-top {
        flex-direction: row;
        gap: 10px;
      }

      .tab-bar {
        gap: 3px;
        overflow-x: visible;
        padding-left: 8px;
        padding-right: 8px;
      }

      .tab-btn {
        flex: 1;
        min-width: 0;
        padding: 8px 4px;
        font-size: 0.65rem;
        letter-spacing: 0.5px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        min-height: 38px;
        border-radius: 8px 8px 0 0 !important;
      }
      .tab-btn::before {
        clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 100%, 0 100%);
      }
      .tab-btn::after {
        clip-path: polygon(6.5px 0, calc(100% - 6.5px) 0, 100% 100%, 0 100%);
      }

      .panels-container {
        padding: 12px 12px 100px;
      }

      textarea,
      select,
      input[type="date"],
      input[type="text"] {
        padding: 14px 16px;
        font-size: 0.95rem;
      }
    }

    /* iPhone SE 2nd/3rd gen + mini: 375pt — tightest common iPhone */
    @media (max-width: 375px) {
      .tab-btn {
        font-size: 0.6rem;
        letter-spacing: 0px;
        padding: 7px 3px;
        min-height: 36px;
      }

      .header-top h1 {
        font-size: 0.95rem;
        letter-spacing: 4px;
      }

      .energy-badge {
        font-size: 0.65rem;
        padding: 5px 10px;
      }

      .bento-box {
        padding: 16px;
      }
    }

    /* iPhone SE 1st gen: 320pt — narrowest iPhone ever made */
    @media (max-width: 320px) {
      .tab-btn {
        font-size: 0.58rem;
        letter-spacing: 0;
        padding: 10px 2px;
      }

      .header-top h1 {
        font-size: 0.85rem;
        letter-spacing: 3px;
      }

      .energy-badge {
        display: none;
      }

      /* sacrificed for space on 320pt */
    }

    /* ── iPhone safe-area: Dynamic Island / notch / home bar ── */
    @supports (padding: env(safe-area-inset-bottom)) {
      .sticky-header {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-top: max(14px, env(safe-area-inset-top));
      }

      .panels-container {
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
      }
    }

    /* ════════════════════════════════════════
   PAYWALL OVERLAY
   ════════════════════════════════════════ */
    #paywall-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(4, 1, 15, 0.4);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      overflow-y: auto;
      padding: 0 0 60px;
      animation: paywallIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    #paywall-overlay::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 30% 80%, rgba(90, 30, 160, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(20, 60, 160, 0.4) 0%, transparent 60%);
      z-index: -2;
      pointer-events: none;
    }

    #paywall-overlay::after {
      content: '';
      position: fixed;
      inset: 0;
      background: url('/assets/peach_striped_planet.png') no-repeat center 20%;
      background-size: 600px;
      opacity: 0.6;
      mix-blend-mode: screen;
      z-index: -1;
      pointer-events: none;
      animation: pulsePlanet 12s infinite alternate ease-in-out;
    }

    @keyframes pulsePlanet {
      0% { transform: scale(1) translateY(0); filter: brightness(1); }
      100% { transform: scale(1.05) translateY(-15px); filter: brightness(1.2); }
    }

    #paywall-overlay.active {
      display: block;
    }

    @keyframes paywallIn {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Header */
    .pw-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px 0;
      max-width: 500px;
      margin: 0 auto;
    }

    .pw-header-title {
      font-family: 'Cinzel', serif;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 5px;
      color: var(--accent-text);
    }

    .pw-energy {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--gold-border);
      color: var(--gold);
      padding: 6px 14px;
      border-radius: 50px;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 2px;
    }

    .pw-energy::before {
      content: '';
      display: inline-block;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 8px var(--accent);
    }

    /* Logo + title */
    .pw-logo-wrap {
      text-align: center;
      padding: 18px 24px 0;
      max-width: 500px;
      margin: 0 auto;
    }

    .pw-logo-wrap img {
      width: 70px;
      height: 70px;
      object-fit: contain;
      mix-blend-mode: screen; /* Hides solid background */
    }

    /* Gold ornamental divider */
    .pw-ornament {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 6px 24px;
      max-width: 500px;
      margin: 0 auto;
    }

    .pw-ornament-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }

    .pw-ornament-symbol {
      color: var(--gold-bright);
      font-size: 1rem;
    }

    .pw-headline {
      font-family: 'Cinzel', serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--gold-bright);
      text-align: center;
      letter-spacing: 3px;
      text-transform: uppercase;
      text-shadow: 0 0 30px rgba(201, 164, 86, 0.5);
      padding: 8px 24px 24px;
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.2;
    }

    /* Plan cards */
    .pw-plans {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 0 20px;
      max-width: 500px;
      margin: 0 auto;
    }

    .pw-card {
      background: rgba(13, 6, 41, 0.85);
      border: 1px solid var(--gold-dim);
      border-radius: 16px;
      padding: 24px 22px;
      position: relative;
      cursor: pointer;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    }

    .pw-card:hover {
      border-color: var(--gold-border);
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(201, 164, 86, 0.15);
    }

    .pw-card.selected {
      border-color: var(--gold-bright);
      box-shadow: 0 0 0 2px var(--gold-bright), 0 8px 40px rgba(201, 164, 86, 0.25);
    }

    /* Removed corner ornaments for a cleaner design */

    /* Popular badge */
    .pw-popular-badge {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gold-bright);
      color: #1A0B3B;
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 1px;
      padding: 4px 14px;
      border-radius: 20px;
      white-space: nowrap;
      text-transform: uppercase;
      box-shadow: 0 2px 10px rgba(201, 164, 86, 0.3);
    }

    .pw-card.popular {
      border-color: var(--gold-border);
      box-shadow: 0 0 20px rgba(201, 164, 86, 0.2);
    }

    .pw-plan-name {
      font-family: 'Cinzel', serif;
      font-size: 1.4rem;
      font-weight: 600;
      color: #fff;
      text-align: center;
      margin-bottom: 4px;
    }

    .pw-plan-price {
      font-size: 1rem;
      font-weight: 700;
      color: var(--gold);
      text-align: center;
      margin-bottom: 16px;
      letter-spacing: 1px;
    }

    .pw-plan-divider {
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
      margin-bottom: 16px;
    }

    .pw-plan-features {
      list-style: none;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.8;
      margin-bottom: 0;
    }

    .pw-plan-features li {
      position: relative;
      padding-left: 24px;
    }

    .pw-plan-features li::before {
      content: '✦';
      position: absolute;
      left: 0;
      color: var(--gold);
      font-size: 0.8rem;
    }

    /* Continue button */
    .pw-continue-wrap {
      max-width: 500px;
      margin: 36px auto 0;
      padding: 0 24px;
    }

    .pw-continue-btn {
      width: 100%;
      padding: 22px;
      background: linear-gradient(135deg, #8B6914 0%, #C9A456 30%, #ECC85A 50%, #C9A456 70%, #8B6914 100%);
      color: #1A0B00;
      font-family: 'Cinzel', serif;
      font-weight: 900;
      font-size: 1rem;
      border-radius: 8px;
      border: 1px solid var(--gold-bright);
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 5px;
      box-shadow: 0 4px 30px rgba(201, 164, 86, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
      position: relative;
      overflow: hidden;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    }

    .pw-continue-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
      transform: skewX(-25deg);
      transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pw-continue-btn:hover::before {
      left: 160%;
    }

    .pw-continue-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 40px rgba(201, 164, 86, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .pw-free-note {
      text-align: center;
      padding-top: 14px;
      font-size: 0.72rem;
      color: rgba(255, 255, 255, 0.3);
      letter-spacing: 1px;
    }

    /* Paywall Comparison Table */
    .pw-comparison ul li {
      position: relative;
      padding-left: 18px;
    }

    .pw-comparison ul li::before {
      position: absolute;
      left: 0;
    }

  

@keyframes gateFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.04); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


                @keyframes dealCard {
                  0% { transform: translateY(-30px) scale(0.9); opacity: 0; }
                  15% { transform: translateY(0) scale(1); opacity: 1; }
                  85% { transform: translateY(0) scale(1); opacity: 1; }
                  100% { transform: translateY(-30px) scale(0.9); opacity: 0; }
                }
              

    @keyframes pulseWave {
      0% {
        transform: scaleX(1);
        opacity: 0.5;
      }

      50% {
        transform: scaleX(1.5);
        opacity: 1;
      }

      100% {
        transform: scaleX(1);
        opacity: 0.5;
      }
    }

    .waveform {
      height: 40px;
      background: var(--neon-lime);
      animation: pulseWave 0.5s infinite alternate;
    }
  

/* ════════════════════════════════════════
   ORACLE CHAT BUBBLE
   ════════════════════════════════════════ */
.oracle-chat-fab {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d85c8a, #8B5CF6);
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 24px rgba(168,85,247,0.5), 0 0 0 0 rgba(168,85,247,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  z-index: 8000;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  animation: chatPulse 3s ease-in-out infinite;
}
.oracle-chat-fab:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 32px rgba(168,85,247,0.7), 0 0 0 6px rgba(168,85,247,0.15);
}
@keyframes chatPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(168,85,247,0.5), 0 0 0 0 rgba(168,85,247,0.4); }
  50% { box-shadow: 0 4px 24px rgba(168,85,247,0.7), 0 0 0 10px rgba(168,85,247,0); }
}
.oracle-chat-fab .chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ECC85A;
  color: #000;
  font-size: 0.6rem;
  font-weight: 900;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

/* ════════════════════════════════════════
   ORACLE CHAT DRAWER
   ════════════════════════════════════════ */
.oracle-chat-drawer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  height: 72vh;
  max-height: 640px;
  background: linear-gradient(180deg, #0D062A 0%, #07031A 100%);
  border: 1px solid rgba(216,92,138,0.3);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.7), 0 -2px 0 rgba(216,92,138,0.2);
  z-index: 8500;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}
.oracle-chat-drawer.open {
  transform: translateY(0);
}
.oracle-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  background: rgba(0,0,0,0.3);
}
.oracle-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,#d85c8a,#8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(216,92,138,0.4);
}
.oracle-chat-name {
  flex: 1;
}
.oracle-chat-name strong {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: #fff;
  letter-spacing: 1px;
}
.oracle-chat-name span {
  font-size: 0.7rem;
  color: rgba(0,201,167,0.8);
  font-weight: 600;
}
.oracle-chat-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
}
.oracle-chat-close:hover { color: #fff; }
.oracle-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.oracle-chat-messages::-webkit-scrollbar { width: 4px; }
.oracle-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.chat-msg {
  display: flex;
  gap: 8px;
  animation: chatMsgIn 0.3s ease forwards;
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg.user { flex-direction: row-reverse; }
.chat-bubble {
  max-width: 80%;
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 0.875rem;
  line-height: 1.55;
  font-family: 'Inter', sans-serif;
}
.chat-msg.oracle .chat-bubble {
  background: rgba(216,92,138,0.1);
  border: 1px solid rgba(216,92,138,0.2);
  color: rgba(255,255,255,0.92);
  border-bottom-left-radius: 4px;
}
.chat-msg.user .chat-bubble {
  background: rgba(99,102,241,0.2);
  border: 1px solid rgba(99,102,241,0.3);
  color: rgba(255,255,255,0.9);
  border-bottom-right-radius: 4px;
}
.chat-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-top: 2px;
}
.chat-msg.oracle .chat-msg-avatar { background: rgba(216,92,138,0.2); }
.chat-msg.user .chat-msg-avatar { background: rgba(99,102,241,0.2); }
.oracle-chat-credit-bar {
  padding: 8px 16px;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.oracle-chat-credit-info {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  font-family: 'Inter', sans-serif;
}
.oracle-chat-credit-info strong {
  color: #ECC85A;
}
.oracle-chat-input-row {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.oracle-chat-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  padding: 10px 18px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
  resize: none;
  max-height: 80px;
}
.oracle-chat-input:focus { border-color: rgba(216,92,138,0.5); }
.oracle-chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg,#d85c8a,#8B5CF6);
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
  align-self: flex-end;
}
.oracle-chat-send:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(168,85,247,0.5); }
.oracle-chat-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.chat-typing {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  align-items: center;
}
.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(216,92,138,0.6);
  animation: typingDot 1.4s ease infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-5px); }
}
.chat-paywall-nudge {
  margin: 8px 16px;
  padding: 10px 14px;
  background: rgba(236,200,90,0.05);
  border: 1px solid rgba(236,200,90,0.2);
  border-radius: 10px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
  text-align: center;
  line-height: 1.5;
}
.chat-paywall-nudge button {
  background: linear-gradient(135deg,#ECC85A,#C9A456);
  color: #000;
  border: none;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
  margin-top: 6px;
  letter-spacing: 1px;
}

/* ════════════════════════════════════════
   MOBILE OVERRIDES
   ════════════════════════════════════════ */
@media (max-width: 480px) {
  .oracle-chat-drawer { max-width: 100%; border-radius: 20px 20px 0 0; }
  .header-logo { max-height: 36px !important; }
  .panels-container { padding: 10px 10px 100px; }
}
/* ========================================================= */
/* ?? NEO-ARCANA PREMIUM UI SYSTEM                        */
/* ========================================================= */

.neo-arcana-ui {
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
  margin-bottom: 30px;
}

.neo-columns {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

@media(max-width: 900px) {
  .neo-columns {
    grid-template-columns: 1fr;
  }
}

.neo-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 15px;
}

.neo-panel-title {
  color: #a855f7;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin: 0 0 15px 0;
  text-align: center;
  text-transform: uppercase;
}

.neo-btn-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.neo-btn {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.neo-btn:hover {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
  color: #fff;
}

.neo-btn.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(0, 201, 167, 0.2));
  border-color: #a855f7;
  color: #fff;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

.neo-input, .neo-select {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  width: 100%;
  box-sizing: border-box;
}

.neo-input:focus, .neo-select:focus {
  outline: none;
  border-color: #a855f7;
}
.receipt-paper {
  background: #fdfdfd !important;
  color: #111 !important;
  border-radius: 4px !important;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  font-family: 'Courier New', Courier, monospace;
  padding: 20px;
  position: relative;
}
.receipt-paper::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  background-image: radial-gradient(circle, transparent 5px, #fdfdfd 6px);
  background-size: 15px 15px;
  background-repeat: repeat-x;
}
#pure-out {
  color: #111 !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: 600 !important;
}
#pure-logic {
  color: #444 !important;
}
.neo-btn {
  text-align: center;
}
.neo-panel-title {
  text-align: center;
  font-weight: 900;
}