:root{
      --bg0:#05070f;
      --bg2:#0b1020;

      --glass: rgba(255,255,255,.07);
      --glass2: rgba(255,255,255,.10);
      --stroke: rgba(255,255,255,.16);
      --stroke2: rgba(255,255,255,.22);
      --shadow: rgba(0,0,0,.58);

      --c1:#00b1c4;
      --c2:#8a2be2;
      --c3:#38bdf8;

      --text: rgba(255,255,255,.92);
    }

    html, body { height: 100%; }
    body {
      margin: 0;
      color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background:
        radial-gradient(900px 700px at 15% 10%, rgba(0,177,196,.22), transparent 58%),
        radial-gradient(900px 700px at 88% 18%, rgba(138,43,226,.18), transparent 60%),
        radial-gradient(900px 900px at 50% 95%, rgba(56,189,248,.14), transparent 60%),
        linear-gradient(180deg, var(--bg2), var(--bg0));
      overflow: hidden;
    }

    .glass {
      background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.28);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        inset 0 -8px 18px rgba(255,255,255,.08),
        0 30px 60px rgba(0,0,0,.65);
      backdrop-filter: blur(30px) saturate(180%);
      -webkit-backdrop-filter: blur(30px) saturate(180%);
    }

    .glass-strong {
      background: linear-gradient(160deg, rgba(255,255,255,.25), rgba(255,255,255,.06));
      border: 1px solid rgba(255,255,255,.35);
      box-shadow:
        inset 0 2px 0 rgba(255,255,255,.75),
        inset 0 -10px 24px rgba(255,255,255,.10),
        0 40px 90px rgba(0,0,0,.70);
      backdrop-filter: blur(36px) saturate(180%);
      -webkit-backdrop-filter: blur(36px) saturate(180%);
    }

    /* liquid rim close to your ref */
    .rim {
      position: relative;
      overflow: hidden;
    }
    .rim::before{
      content:"";
      position:absolute;
      inset:-2px;
      background: linear-gradient(120deg, rgba(255,255,255,.9), rgba(0,177,196,.8), rgba(138,43,226,.7));
      filter: blur(1px);
      opacity:.85;
      pointer-events:none;
    }
    .rim::after{
      content:"";
      position:absolute;
      inset:1px;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
      pointer-events:none;
    }
    .rim > .rim-inner{
      position: relative;
      border-radius: inherit;
      background: rgba(10,12,22,.70);
      border: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      overflow: hidden;
    }

    .soft-glow {
      box-shadow:
        0 26px 85px rgba(0,0,0,.62),
        0 0 22px rgba(0,177,196,.34),
        0 0 28px rgba(138,43,226,.22),
        inset 0 1px 0 rgba(255,255,255,.12);
    }

    .icon-pill {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 14px 36px rgba(0,0,0,.48);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .scroll-snap-x { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .snap-center { scroll-snap-align: center; }
    .hide-scrollbar::-webkit-scrollbar { width: 0; height: 0; }
    .hide-scrollbar { scrollbar-width: none; }

    .swipe-row {
      overflow-y: hidden;
      padding-bottom: 0;
      margin-bottom: 0;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      contain: paint;
    }

    /* swipe hint disabled for Telegram Mini App to avoid rendering artifacts */
    .nudge { animation: none; }

    .tap { transition: transform .12s ease, filter .12s ease; }
    .tap:active { transform: scale(.985); filter: brightness(1.06); }

    .safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom) + 18px); }

    /* floating AI ring like the outer frame */
    .ai-ring {
      background: linear-gradient(135deg, rgba(0,177,196,.95), rgba(138,43,226,.75));
      box-shadow:
        0 18px 55px rgba(0,0,0,.60),
        0 0 26px rgba(0,177,196,.30),
        0 0 30px rgba(138,43,226,.20);
    }
    .ai-core {
      background: rgba(10,12,22,.75);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
    }

    .chip {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 14px 40px rgba(0,0,0,.45);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }


    select option { color: #0b1020; }


    .swipe-card {
      background: rgba(14,18,30,.96);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      min-width: 72%;
      padding: 12px 14px;
    }
  

    .profile-modal {
      position: fixed;
      inset: 0;
      background: rgba(4,7,14,.64);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 60;
      padding: 14px;
    }
    .profile-modal.open { display: flex; }
    .profile-sheet {
      width: 100%;
      max-width: 560px;
      border-radius: 24px;
      padding: 14px 14px calc(env(safe-area-inset-bottom) + 18px);
    }

    .section-hidden {
      display: none;
    }

    button, input, select, textarea {
      touch-action: manipulation;
    }

    input, select, textarea {
      font-size: 16px;
    }

    .chat-modal {
      position: fixed;
      inset: 0;
      background: rgba(4,7,14,.64);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 70;
      padding: 14px;
    }
    .chat-modal.open { display: flex; }
    .chat-sheet {
      width: 100%;
      max-width: 560px;
      max-height: 88vh;
      border-radius: 24px;
      padding: 14px 14px calc(env(safe-area-inset-bottom) + 12px);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .chat-messages {
      min-height: 200px;
      max-height: 48vh;
      overflow-y: auto;
    }