.pop {
      /* Playful pastel palette */
      --bg: #f7fbff;
      --panel: #ffffff;
      --panel-2: #f6f9ff;
      --text: #1f2a44;
      --muted: #5b6b82;
      --accent: #ff8fb1;   /* pink */
      --accent-2: #7cc6fe; /* sky */
      --success: #4ade80;
      --shadow: 0 12px 28px rgba(24,94,224,.10);
      --blur: saturate(120%) blur(10px);
      --decor-sun: #ffd166;
      --decor-cloud: #e6f2ff;
      --decor-star: #ffdd94;
    }

    /* Light mode overrides */
    @media (prefers-color-scheme: light) {
      .pop {
        --bg: #f7fbff;
        --panel: #ffffff;
        --panel-2: #f6f9ff;
        --text: #1f2a44;
        --muted: #5b6b82;
        --accent: #ff8fb1;
        --accent-2: #7cc6fe;
        --success: #22c55e;
        --shadow: 0 12px 28px rgba(24,94,224,.10);
      }
    }

    .pop {
      color: var(--text);
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    }

    /* Backdrop */
    .pop .backdrop {
      position: fixed;
      inset: 0;
      background:
        radial-gradient(1400px 900px at 70% -10%, rgba(255,223,186,.35), transparent 60%),
        radial-gradient(1000px 700px at 0% 120%, rgba(124,198,254,.25), transparent 60%),
        rgba(10, 16, 30, .40);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      backdrop-filter: var(--blur);
      -webkit-backdrop-filter: var(--blur);
    }

    .pop .backdrop.show { display: flex; }

    /* Modal */
    .pop .modal {
      width: min(760px, 92vw);
      background:
        linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.90)) padding-box,
        linear-gradient(180deg, rgba(124,198,254,.50), rgba(255,143,177,.35)) border-box;
      border: 2px solid rgba(124,198,254,.55);
      border-radius: 24px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .pop .modal-inner {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 0;
    }

    @media (max-width: 720px) {
      .pop .modal-inner { grid-template-columns: 1fr; }
    }

    /* Left visual */
    .pop .visual {
      position: relative;
      background:
        linear-gradient(180deg, #fff6fb, #eef7ff);
      padding: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 280px;
    }

    /* Rotating globe (SVG) */
    .pop .globe {
      width: 220px;
      height: 220px;
      position: relative;
      filter: drop-shadow(0 8px 16px rgba(124,198,254,.45));
    }

    .pop .globe .sphere {
      fill: radial-gradient(circle at 35% 30%, #1d274a, #0c1431 60%);
    }

    .pop .globe .sphere-actual {
      fill: url(#sphereGradient);
    }

    .pop .globe .graticule {
      stroke: rgba(124,198,254,.5);
      stroke-width: .8;
      fill: none;
    }

    .pop .globe .land {
      fill: rgba(255,143,177,.75);
      filter: saturate(120%);
    }

    .pop .spin {
      animation: pop-spin 24s linear infinite;
      transform-origin: 50% 50%;
    }

    @keyframes pop-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Right content */
    .pop .content {
      padding: 28px 28px 24px 28px;
      background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,0));
    }

    .pop .title {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: .2px;
      margin: 8px 0 6px 0;
    }

    .pop .desc {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.6;
      margin: 0 0 18px 0;
    }

    .pop .region {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #8b5cf6;
      background: rgba(139,92,246,.10);
      border: 1px solid rgba(139,92,246,.25);
      padding: 6px 10px;
      border-radius: 999px;
      margin-bottom: 14px;
    }

    .pop .actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .pop .btn {
      appearance: none;
      border: none;
      padding: 12px 16px;
      border-radius: 999px;
      font-weight: 600;
      cursor: pointer;
      transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
      box-shadow: 0 8px 18px rgba(124,198,254,.35);
      color: #0a0f1e;
    }

    .pop .btn-primary {
      background: linear-gradient(180deg, #ffa6c3, #ff8fb1);
      color: white;
    }

    .pop .btn-primary:hover { filter: brightness(1.06); }
    .pop .btn:active { transform: translateY(1px); }

    .pop .btn-ghost {
      background: rgba(124,198,254,.12);
      color: var(--text);
      border: 1px solid rgba(124,198,254,.35);
    }

    .pop .tips {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      font-size: 12px;
      color: var(--muted);
    }

    /* Light mode small tune-ups */
    @media (prefers-color-scheme: light) {
      .pop .visual {
        background: linear-gradient(180deg, #fff6fb, #eef7ff);
      }
      .pop .globe { filter: drop-shadow(0 8px 16px rgba(124,198,254,.45)); }
      .pop .globe .graticule { stroke: rgba(124,198,254,.5); }
      .pop .btn-ghost { background: rgba(124,198,254,.12); border-color: rgba(124,198,254,.35); }
    }

    /* cute decorations */
    .pop .decor {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .pop .cloud {
      position: absolute;
      background: var(--decor-cloud);
      border-radius: 50px;
      box-shadow:
        22px 6px 0 4px var(--decor-cloud),
        50px 8px 0 0 var(--decor-cloud),
        70px 2px 0 6px var(--decor-cloud);
      width: 40px; height: 20px;
      opacity: .9;
      animation: pop-float 8s ease-in-out infinite;
    }
    .pop .cloud.c1 { top: 24px; left: 28px; animation-delay: 0s; }
    .pop .cloud.c2 { bottom: 18px; right: 22px; transform: scale(1.2); animation-delay: 2s; }
    .pop .cloud.c3 { top: 60px; right: 80px; transform: scale(0.9); animation-delay: 4s; }

    .pop .star {
      position: absolute;
      width: 10px; height: 10px;
      background: var(--decor-star);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      opacity: .9;
      animation: pop-twinkle 2.4s ease-in-out infinite;
    }
    .pop .star.s1 { top: 18px; right: 22px; animation-delay: .2s; }
    .pop .star.s2 { bottom: 24px; left: 36px; transform: scale(1.1); animation-delay: .8s; }

    @keyframes pop-float {
      0%,100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-6px) scale(1.02); }
    }
    @keyframes pop-twinkle {
      0%,100% { opacity: .6; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.15); }
    }

    /* Cookie bar */
    .pop .cookie-bar {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      width: min(920px, 92vw);
      background: linear-gradient(180deg, #ffffff, #f7fbff);
      border: 2px solid rgba(124,198,254,.55);
      border-radius: 24px;
      box-shadow: 0 14px 30px rgba(124,198,254,.30);
      padding: 16px 16px;
      display: none;
      z-index: 9000;
    }
    .pop .cookie-inner { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
    .pop .cookie-title { font-weight: 800; font-size: 16px; margin: 0 0 4px 0; color: var(--text); }
    .pop .cookie-desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
    .pop .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .pop .cookie-link { color: #2563eb; text-decoration: underline; cursor: pointer; font-weight: 600; }
    .pop .cookie-cloud { position: absolute; width: 50px; height: 22px; background: var(--decor-cloud); border-radius: 50px; opacity: .9; filter: drop-shadow(0 4px 8px rgba(124,198,254,.25)); }
    .pop .cookie-cloud.c1 { top: -10px; left: 18px; }
    .pop .cookie-cloud.c2 { bottom: -12px; right: 22px; transform: scale(1.1); }

    /* Cookie docs modal overrides */
    .pop .cookie-docs .content { padding-top: 24px; }
    .pop .doc-box { max-height: 280px; overflow: auto; background: rgba(124,198,254,.08); border: 1px solid rgba(124,198,254,.25); border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.7; color: var(--muted); }

    /* Cookie customization */
    .pop .cookie-custom { display: none; grid-column: 1 / -1; background: rgba(124,198,254,.08); border: 1px solid rgba(124,198,254,.25); border-radius: 16px; padding: 12px; }
    .pop .cookie-custom h4 { margin: 0 0 8px 0; font-size: 14px; color: var(--text); }
    .pop .cookie-opt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 12px; }
    .pop .cookie-opt + .cookie-opt { margin-top: 6px; }
    .pop .cookie-opt input { width: 18px; height: 18px; }
    .pop .cookie-opt .meta { font-size: 12px; color: var(--muted); line-height: 1.5; }
    .pop .cookie-opt .tag { font-size: 11px; background: rgba(255,143,177,.16); color: #db2777; border: 1px solid rgba(255,143,177,.35); padding: 3px 8px; border-radius: 999px; }
    .pop .cookie-save { display: none; justify-self: end; gap: 10px; }
    .pop .cookie-actions .btn-custom { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.30); color: #5b21b6; }
    .pop .cookie-actions .btn-custom:hover { filter: brightness(1.05); }

    /* Mobile tweaks */
    @media (max-width: 560px) {
      .pop .cookie-inner { grid-template-columns: 1fr; }
      .pop .cookie-actions { justify-content: flex-start; }
      .pop .cookie-save { width: 100%; display: none; }
      .pop .cookie-bar { padding: 14px; border-radius: 20px; }
    }

    /* Agreement modal */
    .pop .agreement-box {
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 12px;
      padding: 14px 16px;
      max-height: 220px;
      overflow: auto;
      font-size: 13px;
      line-height: 1.7;
      color: var(--muted);
    }
    .pop .agreement-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .pop .agreement-title .badge {
      background: rgba(77,163,255,.12);
      color: var(--accent-2);
      border: 1px solid rgba(77,163,255,.22);
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
    }
    @media (prefers-color-scheme: light) {
      .pop .agreement-box { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); color: #475569; }
    }