/* HereWhen liquid-glass design system */
html[data-theme]{
  --bg-deep:#050521;--bg-panel:rgba(38,35,105,.34);--bg-panel-2:rgba(61,50,142,.32);
  --ink:#fbfaff;--ink-dim:#b9b7dc;--primary:#8f72ff;--primary-light:#76d9ff;
  --primary-dim:#6852cc;--primary-ink:#08051c;--rose:#f070db;--friend-accent:#72e5ea;
  --line:rgba(190,205,255,.20);--glass-one:#148cff;--glass-two:#7c35ff;--glass-three:#ff61d2;
  --glass-edge:rgba(203,224,255,.38);--glass-fill:rgba(50,43,125,.25);--glass-shadow:rgba(23,5,83,.42);
  --glow-primary:0 12px 38px -10px color-mix(in srgb,var(--glass-two) 65%,transparent);
}
html[data-theme="liquid"]{--glass-one:#079cff;--glass-two:#7335ff;--glass-three:#ff55d6;--primary:#9270ff;--primary-light:#63d8ff;--rose:#ff67d5}
html[data-theme="moonlight"]{--glass-one:#38cfff;--glass-two:#3959d8;--glass-three:#a88cff;--primary:#75dfff;--primary-light:#b7f4ff;--rose:#aaa0ff}
html[data-theme="pearl"]{--glass-one:#8edfff;--glass-two:#9a87e8;--glass-three:#ffc1dc;--primary:#b9dfff;--primary-light:#fff1fa;--rose:#ffc0df;--glass-fill:rgba(113,107,165,.22)}
html[data-theme="sakura"]{--glass-one:#a876ff;--glass-two:#e34aa8;--glass-three:#ff8fbd;--primary:#ff81c5;--primary-light:#ffc0e1;--rose:#ff64aa}
html[data-theme="ocean"]{--glass-one:#00bce7;--glass-two:#1675dc;--glass-three:#41e2c2;--primary:#47d8f4;--primary-light:#83f0ff;--rose:#5be7cf}
html[data-theme="forest"]{--glass-one:#21d99a;--glass-two:#247c80;--glass-three:#a5df60;--primary:#5fe0ad;--primary-light:#b0f5cc;--rose:#8de5a0}
html[data-theme="desert"]{--glass-one:#ff9a51;--glass-two:#a942ab;--glass-three:#ffd061;--primary:#ffae69;--primary-light:#ffe199;--rose:#ff7aa8}
html[data-theme="midnight"]{--glass-one:#4d70ff;--glass-two:#5533a9;--glass-three:#efc86b;--primary:#e6c16c;--primary-light:#fff0ad;--rose:#a98cff}

html[data-theme] body{background:#030316;background-image:radial-gradient(circle at 14% 12%,color-mix(in srgb,var(--glass-one) 32%,transparent),transparent 34%),radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--glass-three) 24%,transparent),transparent 32%),radial-gradient(circle at 55% 105%,color-mix(in srgb,var(--glass-two) 30%,transparent),transparent 46%)}
html[data-theme] body:before,html[data-theme] body:after{filter:blur(85px);mix-blend-mode:screen;opacity:.28}
html[data-theme] body:before{background:var(--glass-one)}html[data-theme] body:after{background:var(--glass-three)}
html[data-theme] .phone{isolation:isolate;background:linear-gradient(155deg,rgba(9,10,45,.90),rgba(5,5,28,.96));border-color:rgba(151,174,255,.23);box-shadow:0 45px 110px rgba(0,0,12,.72),0 0 48px color-mix(in srgb,var(--glass-two) 17%,transparent),inset 0 1px rgba(255,255,255,.16)}
html[data-theme] .phone:before{inset:-30%;z-index:0;background:conic-gradient(from 90deg at 50% 50%,transparent 0 18%,color-mix(in srgb,var(--glass-one) 18%,transparent) 27%,transparent 38% 58%,color-mix(in srgb,var(--glass-three) 15%,transparent) 70%,transparent 82%);filter:blur(18px);animation:liquidRefraction 18s ease-in-out infinite alternate}
html[data-theme] .phone:after{content:'';position:absolute;z-index:0;width:240px;height:240px;right:-115px;top:13%;border-radius:42% 58% 65% 35%/42% 38% 62% 58%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.28),color-mix(in srgb,var(--glass-three) 26%,transparent) 24%,color-mix(in srgb,var(--glass-two) 18%,transparent) 62%,transparent 70%);filter:blur(3px);box-shadow:inset 18px 14px 28px rgba(255,255,255,.07),inset -18px -20px 36px rgba(12,5,55,.25);opacity:.62;pointer-events:none;animation:liquidBlob 13s ease-in-out infinite alternate}
@keyframes liquidRefraction{to{transform:rotate(20deg) scale(1.08);filter:blur(25px)}}
@keyframes liquidBlob{50%{transform:translate(-20px,36px) rotate(16deg) scale(1.08);border-radius:60% 40% 38% 62%/45% 60% 40% 55%}100%{transform:translate(-5px,78px) rotate(-8deg) scale(.94)}}

html[data-theme] .statusbar{position:relative;background:linear-gradient(180deg,rgba(16,15,54,.58),rgba(10,9,40,.15));border-bottom:1px solid rgba(255,255,255,.05);backdrop-filter:blur(18px) saturate(150%)}
html[data-theme] .card,html[data-theme] .note-box,html[data-theme] .provider-btn,html[data-theme] .discovery-card,html[data-theme] .coming-soon-banner{position:relative;background:linear-gradient(145deg,rgba(255,255,255,.105),var(--glass-fill) 48%,rgba(14,13,57,.30));border:1px solid var(--glass-edge);box-shadow:0 18px 45px -22px var(--glass-shadow),inset 0 1px rgba(255,255,255,.20),inset 0 -1px rgba(106,135,255,.06);backdrop-filter:blur(22px) saturate(165%);-webkit-backdrop-filter:blur(22px) saturate(165%)}
html[data-theme] .card:after,html[data-theme] .discovery-card:after{content:'';position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);opacity:.56;pointer-events:none}
html[data-theme] .card:hover{border-color:color-mix(in srgb,var(--primary-light) 58%,transparent);box-shadow:0 23px 50px -20px var(--glass-shadow),0 0 28px color-mix(in srgb,var(--glass-one) 16%,transparent),inset 0 1px rgba(255,255,255,.25)}
html[data-theme] .btn{background:linear-gradient(105deg,color-mix(in srgb,var(--glass-one) 82%,white),var(--glass-two) 54%,var(--glass-three));color:white;border:1px solid rgba(255,255,255,.32);box-shadow:0 13px 34px -9px color-mix(in srgb,var(--glass-two) 68%,transparent),inset 0 1px rgba(255,255,255,.45),inset 0 -1px rgba(24,5,71,.28);position:relative;overflow:hidden}
html[data-theme] .btn:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 46%,transparent 68%);translate:-120% 0;transition:translate .65s ease}
html[data-theme] .btn:hover:before{translate:120% 0}
html[data-theme] .btn.ghost{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(75,62,155,.16));border:1px solid var(--glass-edge);color:var(--ink);box-shadow:inset 0 1px rgba(255,255,255,.13);backdrop-filter:blur(16px)}
html[data-theme] input[type=text],html[data-theme] input[type=email],html[data-theme] input[type=password],html[data-theme] input[type=date],html[data-theme] input[type=number],html[data-theme] input[type=search],html[data-theme] textarea,html[data-theme] select,html[data-theme] .coupon-field input{background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(26,23,78,.28))!important;color:var(--ink)!important;border:1px solid rgba(190,205,255,.21)!important;box-shadow:inset 0 1px rgba(255,255,255,.10),0 12px 30px -24px var(--glass-shadow);backdrop-filter:blur(18px);outline:none}
html[data-theme] input:focus,html[data-theme] textarea:focus,html[data-theme] select:focus{border-color:color-mix(in srgb,var(--primary-light) 72%,transparent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent),inset 0 1px rgba(255,255,255,.13)!important}
html[data-theme] .navbar{background:linear-gradient(180deg,rgba(11,10,42,.68),rgba(7,6,28,.92));border-top:1px solid rgba(197,211,255,.16);box-shadow:0 -16px 40px rgba(2,2,20,.25),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(28px) saturate(170%)}
html[data-theme] .navbar button{color:var(--ink-dim)}html[data-theme] .navbar button.active{color:var(--primary-light);background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 16%,transparent),transparent);text-shadow:0 0 16px color-mix(in srgb,var(--primary) 65%,transparent)}
html[data-theme] .bubble.them{background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(49,41,118,.28));border:1px solid rgba(196,211,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.13);backdrop-filter:blur(18px)}
html[data-theme] .bubble.me{background:linear-gradient(135deg,var(--glass-two),color-mix(in srgb,var(--glass-three) 76%,var(--glass-two)));box-shadow:0 12px 30px -15px var(--glass-three),inset 0 1px rgba(255,255,255,.28)}
html[data-theme] .theme-toggle,html[data-theme] .theme-menu{background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(30,25,88,.48));border:1px solid rgba(197,215,255,.25);box-shadow:inset 0 1px rgba(255,255,255,.18),0 10px 30px rgba(2,1,18,.30);backdrop-filter:blur(24px) saturate(170%)}
html[data-theme] .theme-toggle{font-size:0}html[data-theme] .theme-toggle:after{content:'◐';font-size:15px;color:var(--primary-light);text-shadow:0 0 12px var(--primary)}
.theme-option.liquid{background:linear-gradient(135deg,#0bc3ff,#7140ff 55%,#ff5bd6)}
html[data-theme] .theme-option{box-shadow:inset 2px 2px 6px rgba(255,255,255,.42),inset -3px -3px 8px rgba(15,5,74,.38),0 4px 12px rgba(0,0,25,.35)}
html[data-theme] .statusbar{z-index:80;overflow:visible}
html[data-theme] .theme-studio{z-index:90}
html[data-theme] .theme-toggle{width:34px;height:34px;position:relative;z-index:92}
html[data-theme] .theme-menu{left:auto;right:-4px;top:42px;transform:translateY(-8px) scale(.96);transform-origin:top right;display:grid;grid-template-columns:repeat(2,86px);gap:9px;width:198px;max-width:none;overflow:visible;border-radius:22px;padding:11px;z-index:100;pointer-events:none}
html[data-theme] .theme-studio.open .theme-menu{transform:translateY(0) scale(1);pointer-events:auto}
html[data-theme] .theme-option{width:86px;height:48px;border-radius:15px;display:flex;align-items:flex-end;justify-content:center;padding:0 5px 5px;touch-action:manipulation;cursor:pointer;isolation:isolate}
html[data-theme] .theme-option span{display:block;position:relative;z-index:2;padding:2px 7px;border-radius:99px;background:rgba(4,4,24,.52);color:#fff;font:600 8px/1.4 var(--sans);letter-spacing:.02em;text-shadow:0 1px 4px #000;pointer-events:none}
html[data-theme] .theme-option:hover,html[data-theme] .theme-option.active{transform:translateY(-2px) scale(1.03)}
html[data-theme] .theme-option.active{outline:2px solid rgba(255,255,255,.82);outline-offset:1px}
html[data-theme] .theme-option.active::after{inset:4px auto auto 5px;width:16px;height:16px;border-radius:50%;background:rgba(4,4,24,.62);font-size:9px}
html[data-theme] .theme-option.moonlight{background:linear-gradient(135deg,#38cfff,#3959d8 58%,#a88cff)}
html[data-theme] .theme-option.pearl{background:linear-gradient(135deg,#e9fbff,#9a87e8 58%,#ffc1dc)}
html[data-theme] .theme-option.sakura{background:linear-gradient(135deg,#a876ff,#e34aa8 58%,#ff8fbd)}
html[data-theme] .theme-option.ocean{background:linear-gradient(135deg,#00d9ef,#1675dc 58%,#41e2c2)}
html[data-theme] .theme-option.forest{background:linear-gradient(135deg,#21d99a,#247c80 58%,#a5df60)}
html[data-theme] .theme-option.desert{background:linear-gradient(135deg,#ff9a51,#a942ab 58%,#ffd061)}
html[data-theme] .theme-option.midnight{background:linear-gradient(135deg,#4d70ff,#5533a9 58%,#efc86b)}
html[data-theme] .eyebrow{color:var(--primary-light);text-shadow:0 0 18px color-mix(in srgb,var(--primary) 52%,transparent)}
html[data-theme] .chip.on{background:linear-gradient(135deg,var(--glass-one),var(--glass-two));border-color:rgba(255,255,255,.35);color:white;box-shadow:0 8px 24px -12px var(--glass-one)}
@media (prefers-reduced-motion:reduce){html[data-theme] .phone:before,html[data-theme] .phone:after{animation:none}}
html[data-theme] .theme-studio.open .theme-option{pointer-events:auto}

/* ===== THEME PALETTE CLICK-SAFETY ===== */
html[data-theme] .theme-studio{position:relative}
html[data-theme] .theme-menu{position:absolute!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .16s ease,transform .2s cubic-bezier(.16,1,.3,1),visibility 0s linear .2s!important}
html[data-theme] .theme-studio.open .theme-menu{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition-delay:0s!important}