/* ══════════════════════════════════════════════
   rek. — style.css
   Extracted from index.html. Single source of truth.
══════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  /* Unique vars not overridden below */
  --grn:      #2ecc71;
  --gold:     #FFD60A;
  --gold-s:   rgba(255,214,10,0.14);
  --app-max:  430px;
  --nav-h:    76px;
  --top-h:    56px;
  --safe-b:   env(safe-area-inset-bottom, 0px);

  /* 2026 color system */
  --red:     #FF3355;
  --red-d:   #E01040;
  --red-s:   rgba(255,51,85,0.12);
  --red-g:   rgba(255,51,85,0.32);
  --bg:      #060608;
  --s1:      #0C0C11;
  --s2:      #131319;
  --s3:      #1C1C24;
  --s4:      #27272F;
  --bdr:     rgba(255,255,255,0.09);
  --bdr2:    rgba(255,255,255,0.05);
  --text:    #F2F2F8;
  --t2:      #8C8C98;
  --t3:      #404048;
}
html{
  height:100%;
  background:linear-gradient(180deg,#070709 0%,#040406 100%);
}
body{
  font-family:'Outfit',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100%;max-width:100vw;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  overflow-y:hidden;
}

/* Film-grain noise texture */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* Ambient mesh gradient */
body::after{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,51,85,0.06) 0%, transparent 60%),
    radial-gradient(circle at 90% 80%, rgba(0,168,225,0.04) 0%, transparent 60%);
  animation: bgBreathe 18s ease-in-out infinite alternate;
}
@keyframes bgBreathe{
  0%{opacity:0.6;transform:scale(1);}
  100%{opacity:1;transform:scale(1.05);}
}

/* ── APP SHELL ── */
.app{
  min-height:100dvh;
  display:flex;flex-direction:column;
  position:relative;
}

/* Desktop centering */
@media(min-width:500px){
  .app{align-items:center;}
  .topbar{left:0;right:0;}
  .main{width:100%;}
  .topbar-inner,.page-inner,.nav-inner{
    max-width:var(--app-max);
    margin:0 auto;width:100%;
  }
  .page-inner,.hero,.search-wrap,.search-hint,.results{
    max-width:var(--app-max);margin-left:auto;margin-right:auto;
  }
  .page-inner{padding:0 20px;}
  .nav{left:0;right:0;}
  .sheet{border-radius:28px 28px 0 0;}
}

/* ── TOPBAR ── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--top-h);
  background:rgba(6,6,9,0.80);
  backdrop-filter:saturate(200%) blur(46px);
  -webkit-backdrop-filter:saturate(200%) blur(46px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.topbar-inner{
  height:100%;display:flex;align-items:center;
  justify-content:center;padding:0 20px;
}
.logo-sm{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:20px;font-weight:800;
  letter-spacing:-0.5px;color:var(--text);
  opacity:0;
  transform:translateY(5px);
  transition:opacity .3s ease,transform .34s cubic-bezier(.34,1.1,.64,1);
}
.logo-sm em{font-style:normal;color:#FF3355;}
.logo-sm.vis{opacity:1;transform:translateY(0);}
.topbar-right{display:flex;align-items:center;gap:8px;}
.tb-icon{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;justify-content:center;
  color:var(--t2);cursor:pointer;
  transition:background .15s,color .15s,transform .12s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;-webkit-user-select:none;
}
.tb-icon:active{transform:scale(.85);}
.tb-icon:hover{background:rgba(255,255,255,0.09);color:var(--text);}
.av{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(145deg,#FF6677 0%,#CC1133 100%);
  box-shadow:0 2px 14px rgba(255,51,85,0.38);
  display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:#fff;
  cursor:pointer;transition:transform .12s,opacity .15s;
}
.av:active{transform:scale(.85);}

/* ── MAIN SCROLL ── */
.main{
  flex:1;
  height:100dvh;
  padding-top:var(--top-h);
  padding-bottom:calc(var(--nav-h) + var(--safe-b) + 28px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pinch-zoom;
  scroll-behavior:smooth;
}

/* ── PAGES ── */
.page{display:none;}
.page.active{display:block;}
.page-inner{padding:0 20px;}

/* ── HERO SECTION ── */
.hero{
  padding:34px 0 28px;
  text-align:left;
  position:relative;
}
.hero::before{
  content:'';position:absolute;
  top:-48px;left:-80px;right:-80px;bottom:-24px;
  background:
    radial-gradient(ellipse at 22% 55%, rgba(255,51,85,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 25%, rgba(120,40,210,0.06) 0%, transparent 52%);
  pointer-events:none;z-index:-1;
}
.hero-wordmark em{font-style:normal;}
.hero-wordmark{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(74px,21vw,118px);
  font-weight:900;
  letter-spacing:-4px;
  line-height:0.90;
  background:linear-gradient(162deg,#FFFFFF 0%,rgba(205,205,225,0.84) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  display:block;
  margin-bottom:16px;
  opacity:0;
  transition:opacity 0.32s ease;
}
.hero-wordmark em{
  background:linear-gradient(148deg,#FF6677 0%,#FF1133 58%,#CC0022 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-wordmark.wm-ready{opacity:1;}

.hero-sub{
  font-size:16px;font-weight:500;
  color:rgba(195,195,215,0.62);
  letter-spacing:-0.15px;
  line-height:1.62;
  height:46px;
  overflow:hidden;
  transition:opacity 0.4s ease, transform 0.4s ease;
}

/* ── SEARCH ── */
.search-wrap{display:flex;gap:10px;align-items:center;margin-bottom:6px;position:sticky;top:0;z-index:10;padding:8px 0 6px;background:var(--bg);}
.search-field{
  flex:1;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:20px;height:54px;padding:0 14px;
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 4px 28px rgba(0,0,0,0.32),inset 0 1px 0 rgba(255,255,255,0.08);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.search-field:focus-within{
  background:rgba(255,255,255,0.075);
  border-color:rgba(255,51,85,0.42);
  box-shadow:0 0 0 4px rgba(255,51,85,0.10),0 4px 32px rgba(0,0,0,0.40),inset 0 1px 0 rgba(255,255,255,0.10);
}
.search-field svg{color:rgba(255,255,255,0.28);flex-shrink:0;}
.search-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-family:'Outfit',sans-serif;
  font-size:15px;font-weight:400;
}
.search-input::placeholder{color:rgba(255,255,255,0.24);}
.spin{
  width:17px;height:17px;flex-shrink:0;
  border:2px solid var(--s4);border-top-color:var(--red);
  border-radius:50%;animation:spin .65s linear infinite;display:none;
}
.spin.on{display:block;}
@keyframes spin{to{transform:rotate(360deg);}}

.search-clear{
  display:none;align-items:center;justify-content:center;
  width:28px;height:28px;flex-shrink:0;border-radius:50%;
  background:rgba(255,255,255,0.08);border:none;
  cursor:pointer;color:var(--t2);
  transition:background .15s,color .15s,opacity .15s;
}
.search-clear:hover{background:rgba(255,255,255,0.14);color:var(--text);}
.search-clear.vis{display:flex;}
.mic{
  width:54px;height:54px;flex-shrink:0;border-radius:20px;
  background:rgba(255,51,85,0.09);
  border:1px solid rgba(255,51,85,0.26);
  color:rgba(255,51,85,0.82);
  box-shadow:0 4px 18px rgba(0,0,0,0.24);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .12s,box-shadow .2s;
}
.mic:active{transform:scale(.88);}
.mic:hover{background:rgba(255,51,85,0.16);border-color:rgba(255,51,85,0.42);}
.mic.on{
  background:#FF3355;color:#fff;border-color:#FF3355;
  animation:mic-pulse 1.1s ease infinite;
  box-shadow:0 0 26px rgba(255,51,85,0.55);
}
@keyframes mic-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,51,85,.48),0 0 22px rgba(255,51,85,.5);}
  55%{box-shadow:0 0 0 14px rgba(255,51,85,0),0 0 22px rgba(255,51,85,.5);}
}

.search-hint{
  font-size:12px;color:rgba(255,255,255,0.26);letter-spacing:-0.1px;
  padding:0 2px;min-height:18px;
  transition:opacity .34s ease,transform .34s ease;
}

/* ── VOICE OVERLAY ── */
.vov{
  position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;opacity:0;pointer-events:none;
  transition:opacity .28s cubic-bezier(.4,0,.2,1);
}
.vov.on{opacity:1;pointer-events:all;}
.vring{
  width:108px;height:108px;border-radius:50%;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 0 0 0 rgba(255,51,85,.4);
  animation:vring 1.1s ease infinite;
  transition:transform .12s;
}
.vring:active{transform:scale(.92);}
@keyframes vring{
  0%,100%{box-shadow:0 0 0 0 rgba(255,51,85,.45),0 0 0 0 rgba(255,51,85,.2);}
  55%{box-shadow:0 0 0 22px rgba(255,51,85,0),0 0 0 44px rgba(255,51,85,0);}
}
.v-status{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:19px;font-weight:700;
  letter-spacing:-.3px;color:var(--text);
}
.v-heard{
  font-size:15px;color:var(--t2);font-style:italic;
  text-align:center;padding:0 48px;min-height:22px;
  line-height:1.5;
}
.v-cancel{
  font-size:14px;font-weight:500;color:var(--t2);
  cursor:pointer;padding:10px 26px;
  border:1px solid var(--bdr);border-radius:24px;
  background:var(--s2);
  transition:color .15s,border-color .15s;
}
.v-cancel:hover{color:var(--text);border-color:rgba(255,255,255,.2);}

/* ── RESULTS ── */
.results{display:none;margin-top:22px;}
.results.on{display:block;}
.zone-label{
  font-size:10px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:rgba(255,255,255,0.32);
  margin-bottom:14px;
}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
@media(min-width:380px){.cards-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:600px){.cards-grid{grid-template-columns:repeat(4,1fr);}}

.section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.section-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:18px;font-weight:800;letter-spacing:-0.5px;
  background:linear-gradient(132deg,#ffffff 0%,rgba(200,200,220,0.80) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.live-dot{
  display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:0.9px;
  text-transform:uppercase;color:#FF3355;
}
.live-dot::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:#FF3355;
  box-shadow:0 0 6px rgba(255,51,85,0.80);
  animation:blink 1.4s ease infinite;
}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 6px rgba(255,51,85,0.9);}50%{opacity:.35;box-shadow:none;}}
.h-scroll{
  display:flex;gap:10px;
  overflow-x:auto;
  padding:3px 0 12px;
  margin:0 -20px;padding-left:20px;padding-right:20px;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pinch-zoom;
  scrollbar-width:none;
  cursor:grab;
}
.h-scroll:active{cursor:grabbing;}
.h-scroll::-webkit-scrollbar{display:none;}

body.carousel-dragging,
body.middle-pan-active{user-select:none;-webkit-user-select:none;}
body.carousel-dragging{cursor:grabbing;}
body.middle-pan-active{cursor:ns-resize;}

/* ── MOVIE CARD ── */
.card{
  cursor:pointer;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),opacity 0.2s;
  -webkit-user-select:none;user-select:none;
}
.card:active{
  transform:scale(.92)!important;
  opacity:.88;
  transition:transform 0.08s ease-out!important;
}
.card:hover{transform:translateY(-6px) scale(1.04);}
.card.scroll{flex-shrink:0;width:162px;}
.card.grid{width:auto;}

.poster-wrap{
  position:relative;border-radius:14px;overflow:hidden;
  background:var(--s3);aspect-ratio:2/3;
  border:1px solid var(--bdr2);
  box-shadow:0 10px 40px -10px rgba(0,0,0,0.85);
  cursor:pointer;
  transition:box-shadow .4s cubic-bezier(0.25,1,0.5,1);
}
.card:hover .poster-wrap{
  box-shadow:0 22px 60px -8px rgba(255,51,85,0.32),0 8px 24px rgba(0,0,0,0.55);
}
.poster-wrap img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center center;
  display:block;
  transition:opacity .3s;
  pointer-events:none;
}
.poster-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;
  padding:12px;text-align:center;
}
.poster-ph svg{opacity:.14;color:var(--t2);}
.poster-ph span{font-size:10px;color:var(--t3);line-height:1.4;margin-top:2px;}
.poster-ph-brand{
  position:absolute;top:8px;left:9px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:-0.3px;color:rgba(255,255,255,0.11);
  pointer-events:none;
}
.poster-ph-brand em{font-style:normal;color:rgba(255,51,85,0.22);}

/* Card bottom overlay */
.card-bottom-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:44px 8px 8px;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.60) 40%,
    rgba(0,0,0,0.96) 100%
  );
  border-radius:0 0 14px 14px;
  z-index:2;
}
.card-overlay-title{
  font-size:11px;font-weight:700;
  color:#fff;line-height:1.28;letter-spacing:-.1px;
  margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 6px rgba(0,0,0,0.9);
}
.card-overlay-badges{display:flex;gap:3px;flex-wrap:wrap;}
.card-overlay-badges .badge{font-size:7.5px;font-weight:800;padding:2.5px 5.5px;border-radius:5px;letter-spacing:.1px;opacity:.95;}

/* Old svc-bar hidden — badges now in overlay */
.card .svc-bar{display:none;}

/* Rating overlay */
.card-rating{
  position:absolute;top:7px;left:7px;
  background:rgba(0,0,0,0.68);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#FFD60A;
  font-size:9.5px;font-weight:900;
  padding:2.5px 6px;border-radius:6px;pointer-events:none;
  border:1px solid rgba(255,255,255,0.09);
}

/* Why tag */
.card-why{
  font-size:9px;
  color:rgba(255,255,255,0.5);
  font-style:italic;
  display:block;
  margin-top:2px;
}

/* shimmer */
.shim-card{cursor:default;}
.shim-card.scroll{flex-shrink:0;width:162px;}
.shim{
  background:linear-gradient(90deg,var(--s2) 25%,rgba(255,255,255,0.04) 50%,var(--s2) 75%);
  background-size:200% 100%;animation:shim 1.4s infinite;
}
@keyframes shim{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.shim.sp{aspect-ratio:2/3;border-radius:14px;}
.shim.sl{height:11px;border-radius:5px;margin-top:9px;}
.shim.sl2{height:11px;border-radius:5px;margin-top:5px;width:58%;}

/* streaming badges */
.badge{font-size:8px;font-weight:800;letter-spacing:.2px;padding:2.5px 6px;border-radius:5px;text-transform:uppercase;white-space:nowrap;line-height:1.4;}
.b-netflix{background:#E50914;color:#fff;}
.b-prime{background:#00A8E1;color:#fff;}
.b-disney{background:#113CCF;color:#fff;}
.b-max{background:#5822DC;color:#fff;}
.b-apple{background:#1c1c1e;color:#fff;border:1px solid rgba(255,255,255,.15);}
.b-hulu{background:#1CE783;color:#000;}
.b-paramount{background:#0064FF;color:#fff;}
.b-peacock{background:#1a1a1a;color:#fff;border:1px solid rgba(255,255,255,.15);}
.b-tubi{background:#F15A24;color:#fff;}
.b-plex{background:#E5A00D;color:#141416;}

/* 3D tilt for results grid */
#results-grid{perspective:1200px;perspective-origin:50% 40%;}
#results-grid .card{
  transition:transform 0.08s ease,box-shadow 0.12s ease;
  will-change:transform;
  transform-origin:center center;
}
#results-grid .card::after{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(100px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.10) 0%, transparent 65%);
  pointer-events:none;z-index:3;
  opacity:0;transition:opacity .2s;
}
#results-grid .card:hover::after{opacity:1;}
#results-grid .card:not(:hover){
  transition:transform 0.38s cubic-bezier(0.34,1.1,0.64,1),box-shadow 0.38s ease;
}

/* ── REKS PAGE ── */
.reks-section-label{
  font-size:9.5px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:rgba(255,255,255,0.28);
  margin-bottom:12px;
}
.reks-saved-sub{
  font-size:13px;color:var(--t2);margin-top:-8px;margin-bottom:14px;letter-spacing:-.1px;
}

/* Incoming rek card */
.irek-card{
  display:flex;gap:13px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:20px;
  padding:16px;
  margin-bottom:10px;
  transition:border-color .18s,transform .12s;
  position:relative;overflow:hidden;
}
.irek-card.unread{
  border-color:rgba(255,51,85,0.28);
  box-shadow:0 4px 30px rgba(255,51,85,0.08);
  background:rgba(255,51,85,0.04);
}
.irek-card.unread::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:#FF3355;border-radius:3px 0 0 3px;
}
.irek-poster{
  width:62px;height:93px;border-radius:10px;
  overflow:hidden;background:var(--s3);
  flex-shrink:0;border:1px solid var(--bdr2);
}
.irek-poster img{width:100%;height:100%;object-fit:cover;object-position:center center;}
.irek-poster-ph{
  width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;font-size:26px;
}
.irek-body{flex:1;min-width:0;}
.irek-from{
  font-size:10px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:#FF3355;margin-bottom:4px;
}
.irek-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:17px;font-weight:700;letter-spacing:-.4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:2px;
}
.irek-meta{font-size:12px;color:var(--t2);margin-bottom:7px;}
.irek-svcs{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:10px;}
.irek-note{
  font-size:12px;color:var(--t2);font-style:italic;
  background:var(--s3);border-radius:8px;padding:7px 10px;
  margin-bottom:10px;line-height:1.45;
}
.irek-actions{display:flex;gap:7px;}
.irek-btn-add{
  background:#FF3355;color:#fff;border:none;
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1px;padding:7px 16px;border-radius:20px;cursor:pointer;
  transition:background .15s,transform .1s;
}
.irek-btn-add:active{transform:scale(.92);}
.irek-btn-add:hover{background:var(--red-d);}
.irek-btn-skip{
  background:transparent;color:var(--t2);
  border:1px solid var(--bdr);
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:500;
  padding:7px 13px;border-radius:20px;cursor:pointer;
  transition:border-color .15s,color .15s,transform .1s;
}
.irek-btn-skip:active{transform:scale(.92);}
.irek-btn-watched{
  background:rgba(46,204,113,0.15);
  color:var(--grn);
  border:1px solid rgba(46,204,113,0.3);
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.1px;padding:7px 14px;border-radius:20px;cursor:pointer;
  transition:background .15s,transform .1s;
  position:relative;
}
.irek-btn-watched:active{transform:scale(.92);}
.irek-btn-watched:hover{background:rgba(46,204,113,0.22);}

.reaction-picker{
  position:absolute;
  bottom:100%;left:50%;
  transform:translateX(-50%) scale(0.6);
  opacity:0;
  background:rgba(18,18,24,0.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:28px;padding:8px 12px;
  display:flex;gap:12px;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s;
  z-index:10;pointer-events:none;white-space:nowrap;margin-bottom:6px;
}
.reaction-picker.on{transform:translateX(-50%) scale(1);opacity:1;pointer-events:all;}
.reaction-picker button{font-size:24px;background:none;border:none;cursor:pointer;padding:4px;transition:transform 0.15s;line-height:1;}
.reaction-picker button:active{transform:scale(1.3);}

.sent-reks-row{
  display:flex;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:13px;
}
.sent-reks-row:last-child{border-bottom:none;}
.sent-reks-title{flex:1;min-width:0;font-weight:500;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sent-reks-to{font-size:11px;color:var(--t3);}
.sent-reks-status{font-size:16px;flex-shrink:0;}

/* ── ALERTS PAGE ── */
.page-head{padding:22px 0 14px;}
.page-title{
  font-size:30px;font-weight:900;letter-spacing:-0.9px;
  background:linear-gradient(132deg,#ffffff 0%,rgba(200,200,222,0.82) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.page-sub{font-size:13px;color:rgba(200,200,215,0.52);margin-top:3px;}

/* filter strip */
.alert-filters{
  display:flex;gap:8px;margin-bottom:20px;
  overflow-x:auto;scrollbar-width:none;
  padding-bottom:2px;
}
.alert-filters::-webkit-scrollbar{display:none;}
.af-btn{
  flex-shrink:0;padding:6px 14px;border-radius:20px;
  font-size:12px;font-weight:600;letter-spacing:-.1px;
  cursor:pointer;border:1px solid var(--bdr);
  background:transparent;color:var(--t2);
  transition:background .15s,color .15s,border-color .15s,transform .1s;
  font-family:'Outfit',sans-serif;
}
.af-btn:active{transform:scale(.92);}
.af-btn.on{
  background:rgba(255,51,85,0.13);color:#FF3355;
  border-color:rgba(255,51,85,0.28);
}

.alert-section-label{
  font-size:9.5px;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:rgba(255,255,255,0.28);
  margin:4px 0 12px;
}

/* alert card */
.alert-card{
  display:flex;align-items:center;gap:13px;
  padding:13px 14px;
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  transition:border-color .18s,transform .12s,background .15s;
  margin-bottom:8px;
  position:relative;overflow:hidden;
}
.alert-card:active{transform:scale(.97);}
.alert-card:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.11);}
.alert-card.unread{border-color:rgba(255,51,85,0.26);}
.alert-card.unread::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:#FF3355;border-radius:3px 0 0 3px;
}
.alert-thumb{
  width:48px;height:72px;border-radius:9px;
  overflow:hidden;background:var(--s3);
  flex-shrink:0;border:1px solid var(--bdr2);
}
.alert-thumb img{width:100%;height:100%;object-fit:cover;object-position:center center;}
.alert-thumb-ph{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.alert-body{flex:1;min-width:0;}
.alert-service{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#FF3355;margin-bottom:3px;}
.alert-t{font-size:15px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.alert-s{font-size:12px;color:var(--t2);margin-top:2px;line-height:1.4;}
.alert-meta{display:flex;align-items:center;gap:8px;margin-top:6px;}
.alert-time{font-size:11px;color:var(--t3);}
.alert-genre{font-size:10px;color:var(--t3);background:var(--s3);padding:2px 7px;border-radius:10px;}
.unread-dot{width:8px;height:8px;border-radius:50%;background:#FF3355;box-shadow:0 0 7px rgba(255,51,85,0.65);flex-shrink:0;align-self:flex-start;margin-top:4px;}

/* empty alerts state */
.alerts-empty{padding:60px 20px;text-align:center;}
.alerts-empty-icon{font-size:40px;margin-bottom:14px;}
.alerts-empty-t{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.3px;margin-bottom:6px;}
.alerts-empty-s{font-size:14px;color:var(--t2);line-height:1.55;}

.reks-empty{padding:48px 0;text-align:center;}
.reks-empty-icon{font-size:30px;margin-bottom:12px;opacity:.82;letter-spacing:2px;}
.reks-empty-t{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.3px;margin-bottom:6px;}
.reks-empty-s{font-size:13px;color:var(--t2);line-height:1.55;}

/* ── BOTTOM NAV ── */
.nav{
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  background:rgba(6,6,9,0.84);
  backdrop-filter:saturate(200%) blur(52px);
  -webkit-backdrop-filter:saturate(200%) blur(52px);
  border-top:1px solid rgba(255,255,255,0.07);
  box-shadow:0 -1px 0 rgba(255,255,255,0.04),0 -28px 64px rgba(0,0,0,0.24);
  padding-bottom:calc(var(--safe-b) + 8px);
}
.nav-inner{
  height:60px;
  display:flex;align-items:center;justify-content:space-around;
  padding:0 8px;
  max-width:var(--app-max);
  margin:0 auto;
  position:relative;
}
.ni{
  min-height:56px;
  display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:6px 18px;border-radius:14px;
  cursor:pointer;position:relative;
  transition:transform .12s,background .15s;
  -webkit-user-select:none;user-select:none;
}
.ni:active{transform:scale(.82);}
.ni svg{color:rgba(255,255,255,0.38);transition:color .2s;}
.ni span{font-size:11px;font-weight:500;color:rgba(255,255,255,0.38);transition:color .2s;letter-spacing:.1px;}
.ni.on svg{stroke:#FF3355;fill:rgba(255,51,85,0.11);color:#FF3355;}
.ni.on span{color:#FF3355;font-weight:600;}
.nav-badge{
  position:absolute;top:3px;right:12px;
  min-width:17px;height:17px;
  background:#FF3355;color:#fff;
  font-size:9px;font-weight:700;
  border-radius:9px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
  font-family:'Outfit',sans-serif;
  box-shadow:0 0 18px rgba(255,51,85,.35);
}
.nav-pill{
  position:absolute;border-radius:17px;
  background:rgba(255,51,85,0.11);
  border:1px solid rgba(255,51,85,0.16);
  transition:
    left .28s cubic-bezier(.34,1.1,.64,1),
    width .28s cubic-bezier(.34,1.1,.64,1),
    top .28s cubic-bezier(.34,1.1,.64,1),
    height .28s cubic-bezier(.34,1.1,.64,1);
  pointer-events:none;
}
.ni-av{
  width:26px!important;height:26px!important;
  font-size:11px!important;
  border-radius:50%!important;
  cursor:default!important;
  transition:none!important;
}

/* ── SHEETS ── */
.sheet-bg{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(16px);
  opacity:0;pointer-events:none;
  transition:opacity .28s cubic-bezier(.4,0,.2,1);
}
.sheet-bg.on{opacity:1;pointer-events:all;}

.sheet{
  position:fixed;bottom:0;left:50%;z-index:201;
  width:100%;max-width:var(--app-max);
  transform:translate(-50%,100%);
  background:rgba(10,10,15,0.86);
  backdrop-filter:blur(60px) saturate(200%);
  -webkit-backdrop-filter:blur(60px) saturate(200%);
  border-radius:28px 28px 0 0;
  border-top:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 -28px 80px rgba(0,0,0,0.60);
  max-height:92dvh;overflow:hidden;
  padding-bottom:calc(var(--safe-b) + 36px);
  transition:transform .90s cubic-bezier(.32,.72,0,1);
  overscroll-behavior:contain;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.sheet.on{transform:translate(-50%,0);}
.sheet::-webkit-scrollbar{display:none;}
.sheet-handle{
  width:38px;height:4px;
  background:rgba(255,255,255,0.18);
  border-radius:2px;margin:14px auto 0;
}

/* Generic sheet close button */
.sheet-close-btn{
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.11);
  color:rgba(255,255,255,0.65);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:background .15s,transform .12s,color .15s;
}
.sheet-close-btn:hover{background:rgba(255,255,255,0.13);color:rgba(255,255,255,0.9);}
.sheet-close-btn:active{transform:translateY(-50%) scale(.86);}

/* SPLASH */
.splash-art{
  width:100%;height:360px;position:relative;overflow:visible;
}
.splash-art img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:center top;
  clip-path:inset(0);
  transform:scale(1.07);
  transition:transform 0.85s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
}
.splash-presented .splash-art img{transform:scale(1.0);}
.splash-art::after{
  content:'';position:absolute;
  inset:0 0 -72px 0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.0) 0%,
    rgba(10,10,15,0.12) 42%,
    rgba(10,10,15,0.84) 76%,
    rgba(10,10,15,0.98) 100%
  );
}
.splash-ph{
  width:100%;height:100%;background:var(--s3);
  display:flex;align-items:center;justify-content:center;
  color:var(--t3);
}
.splash-close{
  position:absolute;top:14px;right:14px;z-index:10;
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,0.46);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.88);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s,transform .12s,opacity .15s;
  opacity:0;pointer-events:none;
}
.splash-presented .splash-close{opacity:1;pointer-events:all;transition-delay:.18s;}
.splash-close:hover{background:rgba(0,0,0,0.68);}
.splash-close:active{transform:scale(.88);}

.splash-body{
  padding:0 22px 44px;
  position:relative;
}
.splash-body::before{
  content:'';
  position:absolute;top:-28px;left:0;right:0;height:28px;
  pointer-events:none;
}

/* Content blocks: start invisible and below */
.splash-chips,
.splash-title,
.splash-meta,
.splash-desc,
.hero-btns,
.util-row,
.where-label,
.svc-list{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity 0.42s ease,
    transform 0.42s cubic-bezier(0.34,1.1,0.64,1);
}
.splash-presented .splash-chips  {opacity:1;transform:translateY(0);transition-delay:0.04s;}
.splash-presented .splash-title  {opacity:1;transform:translateY(0);transition-delay:0.10s;}
.splash-presented .splash-meta   {opacity:1;transform:translateY(0);transition-delay:0.15s;}
.splash-presented .splash-desc   {opacity:1;transform:translateY(0);transition-delay:0.20s;}
.splash-presented .hero-btns     {opacity:1;transform:translateY(0);transition-delay:0.25s;}
.splash-presented .util-row      {opacity:1;transform:translateY(0);transition-delay:0.30s;}
.splash-presented .where-label   {opacity:1;transform:translateY(0);transition-delay:0.35s;}
.splash-presented .svc-list      {opacity:1;transform:translateY(0);transition-delay:0.40s;}

/* Reset — no transition flash on close */
.splash-resetting .splash-chips,
.splash-resetting .splash-title,
.splash-resetting .splash-meta,
.splash-resetting .splash-desc,
.splash-resetting .hero-btns,
.splash-resetting .util-row,
.splash-resetting .where-label,
.splash-resetting .svc-list{transition:none;opacity:0;transform:translateY(18px);}
.splash-resetting .splash-art img{transition:none;transform:scale(1.07);}

.splash-divider{height:1px;background:var(--bdr2);margin:18px 0 16px;}

.splash-chips{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap;}
.chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;letter-spacing:.3px;
  padding:4px 10px;border-radius:20px;
}
.chip-red{
  background:rgba(255,51,85,0.16);
  border:1px solid rgba(255,51,85,0.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#FF3355;
}
.chip-dim{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
#sp-rating{font-size:14px;font-weight:900;padding:5px 13px;letter-spacing:-0.1px;color:#FFD60A;}

.splash-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:28px;font-weight:900;
  letter-spacing:-.8px;line-height:1.12;
  margin-bottom:6px;
}
.splash-meta{font-size:13px;color:var(--t2);letter-spacing:-.1px;margin-bottom:10px;}
.splash-desc{font-size:13px;color:var(--t2);line-height:1.68;margin-bottom:22px;}

/* Hero action buttons */
.hero-btns{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px;}
.hbtn{
  height:54px;border-radius:16px;border:none;
  font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:-.1px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity .15s,transform .12s,background .15s,box-shadow .2s;
  -webkit-user-select:none;user-select:none;
}
.hbtn:active{transform:scale(.94);}
.hbtn-rek{
  background:linear-gradient(155deg,#FF6677 0%,#FF1133 52%,#CC0022 100%);
  box-shadow:0 8px 42px rgba(255,51,85,0.52),inset 0 1px 0 rgba(255,255,255,0.22);
  border:1px solid rgba(255,51,85,0.28);
  color:#fff;
}
.hbtn-rek:hover{
  background:linear-gradient(155deg,#FF5566 0%,#EE0022 52%,#BB0011 100%);
  box-shadow:0 10px 52px rgba(255,51,85,0.62),inset 0 1px 0 rgba(255,255,255,0.18);
}
.hbtn-watch{
  background:rgba(242,242,248,0.10);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.13);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.hbtn-watch:hover{background:rgba(242,242,248,0.16);opacity:1;}

/* utility row */
.util-row{display:flex;gap:9px;margin-bottom:24px;}
.util-btn{
  flex:1;height:42px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.09);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--t2);font-family:'Outfit',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:-.1px;
  border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:border-color .15s,color .15s,transform .12s,background .15s;
}
.util-btn:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.16);color:var(--text);}
.util-btn:active{transform:scale(.93);}
.util-btn.saved{border-color:rgba(46,204,113,0.38);background:rgba(46,204,113,0.09);color:var(--grn);}

.where-label{
  font-size:10px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:rgba(255,255,255,0.32);
  margin-bottom:12px;
}
.svc-list{display:flex;flex-direction:column;gap:8px;}

/* Redesigned service items */
.svc-item{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:16px;padding:0;
  cursor:pointer;
  transition:transform .13s,border-color .18s,background .18s,box-shadow .18s;
}
.svc-item:active{transform:scale(.97);}
.svc-item:hover{background:rgba(255,255,255,0.07)!important;border-color:rgba(255,255,255,0.14)!important;box-shadow:0 4px 20px rgba(0,0,0,0.28);}
.svc-color-bar{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:16px 0 0 16px;opacity:0.7;}
.svc-inner{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 15px 20px;gap:12px;}
.svc-left{display:flex;align-items:center;gap:11px;}
.svc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.svc-info{flex:1;min-width:0;}
.svc-n{font-size:15px;font-weight:600;letter-spacing:-.2px;color:var(--text);}
.svc-t{font-size:11px;color:rgba(255,255,255,0.35);margin-top:2px;letter-spacing:.1px;}
.svc-arrow{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.55);flex-shrink:0;
  transition:background .15s,color .15s,transform .15s;
}
.svc-item:hover .svc-arrow{background:rgba(255,255,255,0.14);color:var(--text);transform:translateX(2px);}
.svc-arrow.direct{background:rgba(255,51,85,0.15);color:#FF3355;border:1px solid rgba(255,51,85,0.22);}

/* Legacy svc row (settings) */
.svc-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.svc-toggle-row:last-child{border-bottom:none;}
.svc-toggle-left{display:flex;align-items:center;gap:11px;}
.svc-toggle-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.svc-toggle-name{font-size:15px;font-weight:500;letter-spacing:-.1px;}

/* ── REK SHEET ── */
.rek-header{padding:20px 22px 16px;}
.rek-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:23px;font-weight:900;letter-spacing:-0.5px;
}
.rek-sub{font-size:13px;color:var(--t2);margin-top:3px;}
.rek-empty{padding:48px 22px;text-align:center;}
.rek-empty-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.3px;margin-bottom:8px;}
.rek-empty-sub{font-size:14px;color:var(--t2);line-height:1.55;}
.rek-list{padding:0 22px;}
.rek-row{
  display:flex;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--bdr2);
  cursor:pointer;transition:opacity .15s,transform .15s;
  -webkit-user-select:none;user-select:none;
}
.rek-row:last-child{border-bottom:none;}
.rek-row:active{opacity:.55;transform:scale(.97);}
.rek-thumb{width:50px;height:75px;border-radius:9px;overflow:hidden;background:var(--s3);flex-shrink:0;border:1px solid var(--bdr2);}
.rek-thumb img{width:100%;height:100%;object-fit:cover;object-position:center center;}
.rek-info{flex:1;min-width:0;}
.rek-row-title{font-size:16px;font-weight:600;letter-spacing:-.25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rek-row-meta{font-size:12px;color:var(--t2);margin-top:2px;}
.rek-row-svcs{display:flex;gap:3px;margin-top:5px;flex-wrap:wrap;}
.rek-arrow{color:var(--red);flex-shrink:0;}

/* ── TOAST ── */
.toast{
  position:fixed;
  bottom:calc(var(--nav-h) + var(--safe-b) + 14px);
  left:50%;transform:translateX(-50%) translateY(8px);
  background:rgba(18,18,24,0.94);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  box-shadow:0 14px 44px rgba(0,0,0,0.72),inset 0 1px 0 rgba(255,255,255,0.09);
  border-radius:28px;
  color:var(--text);
  padding:11px 22px;
  font-size:13px;font-weight:500;letter-spacing:-.1px;
  z-index:600;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
.toast-success{border-left:3px solid var(--grn);}
.toast-error{border-left:3px solid #FF3355;}

/* ── SETTINGS SHEET ── */
.settings-header{
  display:flex;align-items:center;gap:14px;
  padding:20px 22px 24px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.settings-av{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(145deg,#FF6677 0%,#CC1133 100%);
  box-shadow:0 4px 22px rgba(255,51,85,0.34);
  display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:20px;color:#fff;flex-shrink:0;
}
.settings-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.3px;}
.settings-sub{font-size:13px;color:var(--t2);margin-top:2px;}
.settings-section{padding:20px 22px 0;}
.settings-section-label{font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--t3);margin-bottom:14px;}
.settings-filter-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.settings-filter-label{font-size:15px;font-weight:500;letter-spacing:-.1px;}
.settings-filter-sub{font-size:12px;color:var(--t2);margin-top:2px;}

/* Toggle switch */
.toggle{position:relative;width:44px;height:26px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{position:absolute;inset:0;border-radius:13px;background:var(--s4);cursor:pointer;transition:background .2s;}
.toggle input:checked + .toggle-track{background:#FF3355;}
.toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;pointer-events:none;transition:transform .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 4px rgba(0,0,0,.3);}
.toggle input:checked ~ .toggle-thumb{transform:translateX(18px);}

.settings-auth-row{padding:16px 22px 0;display:flex;flex-direction:column;gap:10px;}
.settings-signin-btn{
  width:100%;height:52px;
  background:linear-gradient(155deg,#FF6677 0%,#FF1133 52%,#CC0022 100%);
  border:none;border-radius:16px;
  color:#fff;font-family:'Outfit',sans-serif;
  font-size:16px;font-weight:700;letter-spacing:-0.15px;
  cursor:pointer;
  box-shadow:0 6px 28px rgba(255,51,85,0.42),inset 0 1px 0 rgba(255,255,255,0.22);
  transition:transform .12s,box-shadow .15s;
}
.settings-signin-btn:hover{box-shadow:0 8px 36px rgba(255,51,85,0.54),inset 0 1px 0 rgba(255,255,255,0.18);}
.settings-signin-btn:active{transform:scale(.97);}
.settings-signout-btn{
  align-self:flex-start;height:36px;padding:0 18px;
  font-size:13px;font-weight:500;border-radius:10px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.09);
  color:var(--t2);cursor:pointer;transition:background .15s,color .15s;
}
.settings-signout-btn:hover{background:rgba(255,255,255,0.10);color:var(--text);}

/* ── FIND FRIENDS SHEET ── */
.friends-header{padding:20px 22px 4px;}
.friends-search-wrap{padding:12px 22px 4px;}
.friends-input{
  width:100%;padding:13px 16px;
  border-radius:14px;border:1px solid var(--bdr);
  background:var(--s2);color:var(--text);
  font-family:'Outfit',sans-serif;font-size:16px;outline:none;
}
.friends-input::placeholder{color:var(--t3);}
#friends-results{padding:0 22px;}
.friend-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.friend-row:last-child{border-bottom:none;}
.friend-av{width:40px;height:40px;border-radius:50%;background:var(--s3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:var(--text);flex-shrink:0;}
.friend-info{flex:1;min-width:0;}
.friend-name{font-size:15px;font-weight:600;color:var(--text);}
.friend-meta{font-size:12px;color:var(--t3);margin-top:1px;}
.friend-add-btn{padding:7px 16px;border-radius:20px;background:var(--red);color:#fff;font-weight:700;font-size:13px;border:none;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.friend-add-btn:disabled{background:var(--s3);color:var(--t3);cursor:default;}
.friend-add-btn.added{background:rgba(46,204,113,.15);color:var(--grn);border:1px solid rgba(46,204,113,.3);}
.friends-divider{height:1px;background:rgba(255,255,255,.07);margin:8px 22px;}
.friends-section-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:12px 22px 4px;}
.friends-empty{padding:24px 22px;text-align:center;color:var(--t3);font-size:14px;}

/* ── AUTH SHEET ── */
.auth-wrap{padding:4px 24px 36px;}
.auth-head{text-align:center;padding:22px 0 26px;}
.auth-logo{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:52px;font-weight:900;letter-spacing:-2.5px;line-height:1;
  background:linear-gradient(162deg,#ffffff 0%,rgba(208,208,228,0.86) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  margin-bottom:10px;display:block;
}
.auth-logo em{
  font-style:normal;
  background:linear-gradient(148deg,#FF6677 0%,#FF1133 60%,#CC0022 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.auth-tagline{font-size:14px;color:var(--t2);letter-spacing:-0.1px;line-height:1.55;}
.auth-tabs{
  display:flex;gap:0;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);
  border-radius:15px;padding:4px;margin-bottom:22px;
}
.auth-tab{
  flex:1;height:40px;border:none;border-radius:12px;
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;letter-spacing:-0.15px;
  cursor:pointer;background:transparent;color:var(--t2);
  transition:background .22s,color .22s,box-shadow .22s;
}
.auth-tab.on{background:var(--s4);color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,0.35);}
.auth-fields{display:flex;flex-direction:column;gap:11px;margin-bottom:20px;}
.auth-input{
  width:100%;padding:15px 16px;border-radius:14px;
  border:1.5px solid rgba(255,255,255,0.09);
  background:rgba(255,255,255,0.05);color:var(--text);
  font-family:'Outfit',sans-serif;font-size:16px;outline:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.auth-input::placeholder{color:rgba(255,255,255,0.22);}
.auth-input:focus{border-color:rgba(255,51,85,0.42);box-shadow:0 0 0 4px rgba(255,51,85,0.09);background:rgba(255,255,255,0.07);}
.auth-submit-btn{
  display:block;width:100%;height:56px;
  background:linear-gradient(155deg,#FF6677 0%,#FF1133 52%,#CC0022 100%);
  border:none;border-radius:16px;color:#fff;
  font-family:'Outfit',sans-serif;font-size:17px;font-weight:700;letter-spacing:-0.2px;
  cursor:pointer;
  box-shadow:0 8px 34px rgba(255,51,85,0.46),inset 0 1px 0 rgba(255,255,255,0.22);
  transition:transform .12s,box-shadow .15s;margin-bottom:16px;
}
.auth-submit-btn:hover{box-shadow:0 10px 42px rgba(255,51,85,0.56),inset 0 1px 0 rgba(255,255,255,0.18);}
.auth-submit-btn:active{transform:scale(.97);}
.auth-legal{text-align:center;font-size:12px;color:var(--t3);letter-spacing:-0.1px;line-height:1.6;}

/* ── ONBOARDING ── */
.onboard-ov{
  position:fixed;inset:0;z-index:1000;
  background:var(--bg);
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;
  padding-bottom:calc(var(--safe-b) + 48px);
  transition:opacity .4s,transform .4s;
}
.onboard-ov.out{opacity:0;pointer-events:none;transform:scale(.96);}
.onboard-slides{
  width:100%;max-width:var(--app-max);flex:1;
  display:flex;overflow:hidden;position:relative;
}
.onboard-slide{
  flex-shrink:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 36px;
  transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .4s;
  position:absolute;inset:0;opacity:0;transform:translateX(60px);
}
.onboard-slide.active{opacity:1;transform:translateX(0);}
.onboard-slide.prev{opacity:0;transform:translateX(-60px);}

.ob-logo{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:84px;font-weight:900;letter-spacing:-4px;line-height:1;
  color:var(--text);margin-bottom:28px;
}
.ob-logo em{font-style:normal;color:#FF3355;}

.ob-icon{
  width:96px;height:96px;border-radius:28px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:28px;position:relative;
}
.ob-icon-find{background:var(--s2);border:1px solid var(--bdr);}
.ob-icon-mic{
  position:absolute;bottom:-6px;right:-6px;
  width:28px;height:28px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--bdr);
  display:flex;align-items:center;justify-content:center;
}
.ob-icon-rek{background:var(--red-s);border:1px solid rgba(255,51,85,.2);}

.ob-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:28px;font-weight:800;
  letter-spacing:-.6px;text-align:center;
  margin-bottom:12px;line-height:1.15;
}
.ob-sub{font-size:15px;color:var(--t2);text-align:center;line-height:1.65;letter-spacing:-.1px;}

/* dots */
.ob-dots{display:flex;gap:8px;margin-bottom:28px;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--s4);transition:background .25s,width .25s;}
.ob-dot.on{background:#FF3355;width:22px;border-radius:4px;}

/* buttons */
.ob-btn{
  width:100%;max-width:var(--app-max);height:54px;
  background:#FF3355;color:#fff;border:none;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;
  border-radius:16px;cursor:pointer;letter-spacing:-.2px;
  padding:0 36px;
  transition:background .15s,transform .12s,opacity .15s;
}
.ob-btn:active{transform:scale(.97);}
.ob-btn:hover{background:var(--red-d);}
.ob-btn.done{
  background:var(--grn);
  animation:ob-done-pulse 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes ob-done-pulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(46,204,113,0.7);}
  45%{transform:scale(1.04);box-shadow:0 0 0 18px rgba(46,204,113,0);}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(46,204,113,0);}
}

.ob-skip{
  margin-top:14px;font-size:14px;color:var(--t3);
  cursor:pointer;padding:8px 24px;transition:color .15s;
  background:none;border:none;font-family:'Outfit',sans-serif;
}
.ob-skip:hover{color:var(--t2);}

.ob-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:320px;}
.ob-svc-btn{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:14px;
  background:var(--s2);border:1.5px solid var(--bdr);
  cursor:pointer;transition:border-color .15s,background .15s,transform .1s;
  -webkit-user-select:none;user-select:none;
}
.ob-svc-btn:active{transform:scale(.92);}
.ob-svc-btn.sel{border-color:#FF3355;background:rgba(255,51,85,0.11);}
.ob-svc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.ob-svc-name{font-size:13px;font-weight:600;letter-spacing:-.1px;color:var(--t2);}
.ob-svc-btn.sel .ob-svc-name{color:var(--text);}

/* Onboarding reveal */
.ob-reveal{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:20px;opacity:0;pointer-events:none;
  transition:opacity 0.22s ease;
}
.ob-reveal.show{opacity:1;pointer-events:all;}
.ob-reveal-logo{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(80px,24vw,120px);
  font-weight:900;letter-spacing:-3px;line-height:1;
  display:flex;align-items:baseline;
  will-change:transform,opacity;
  transition:transform 0.52s cubic-bezier(0.4,0,1,1),opacity 0.38s ease;
}
.ob-rl-rek{
  display:inline-block;color:var(--text);
  opacity:0;transform:translateX(-28px);
  transition:opacity 0.38s cubic-bezier(0.22,1,0.36,1),transform 0.42s cubic-bezier(0.34,1.1,0.64,1);
}
.ob-rl-dot{
  font-style:normal;color:#FF3355;
  display:inline-block;
  opacity:0;transform:scale(0) rotate(-200deg);
  transition:opacity 0.28s ease,transform 0.48s cubic-bezier(0.34,1.6,0.64,1);
}
.ob-reveal.animate .ob-rl-dot{opacity:1;transform:scale(1) rotate(0deg);}
.ob-reveal.animate .ob-rl-rek{opacity:1;transform:translateX(0);transition-delay:0.26s;}
.ob-reveal-sub{display:none;}
.ob-reveal-logo.exit{
  transform:scale(3.2);opacity:0;
  transition:transform 0.48s cubic-bezier(0.4,0,0.8,0),opacity 0.32s ease 0.08s;
}

/* ── APP REVEAL ── */
@keyframes appReveal{from{opacity:0;}to{opacity:1;}}
.app-revealed{animation:appReveal 0.45s ease-out both;}

/* ── ANIMATIONS ── */
@keyframes slideUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.su{animation:slideUp .30s cubic-bezier(.25,1,.5,1) forwards;opacity:0;}
.su:nth-child(1){animation-delay:.00s}
.su:nth-child(2){animation-delay:.05s}
.su:nth-child(3){animation-delay:.10s}
.su:nth-child(4){animation-delay:.15s}
.su:nth-child(5){animation-delay:.20s}
.su:nth-child(6){animation-delay:.25s}
.su:nth-child(7){animation-delay:.30s}
.su:nth-child(8){animation-delay:.35s}
.su:nth-child(9){animation-delay:.40s}

@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ── PAGE BACK BUTTON ── */
.page-back-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:none;background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--text);cursor:pointer;margin-bottom:8px;
  transition:background .15s;
}
.page-back-btn:active{background:rgba(255,255,255,0.14);}
.page-back-btn:hover{background:rgba(255,255,255,0.11);}

/* ── GAMIFICATION ── */
.tier-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:700;letter-spacing:.4px;
  padding:2px 8px;border-radius:20px;
  border:1px solid currentColor;vertical-align:middle;margin-left:6px;opacity:.9;
}
.tier-legend{color:#888;}
.tier-casual{color:#4da6ff;}
.tier-buff{color:#a855f7;}
.tier-tastemaker{color:#FFD60A;}
.tier-legend-badge{color:#FF3355;animation:tier-pulse 2.2s ease infinite;}
@keyframes tier-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,51,85,0.35);}55%{box-shadow:0 0 0 8px rgba(255,51,85,0);}}

.tier-progress-wrap{padding:14px 22px 6px;}
.tier-progress-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--t3);margin-bottom:7px;}
.tier-progress-bar{height:4px;border-radius:2px;background:rgba(255,255,255,0.08);overflow:hidden;}
.tier-progress-fill{height:100%;border-radius:2px;background:var(--red);transition:width .6s cubic-bezier(0.34,1.56,0.64,1);}

.streak-badge{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;margin-left:6px;vertical-align:middle;}


/* ── REK BOARD ── */
.rek-board-preview{margin-top:14px;padding-bottom:6px;}
.rek-board-shell{display:grid;gap:10px;}
.rek-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.rek-stat-card,.rek-board-card{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;padding:14px;
  box-shadow:0 10px 28px rgba(0,0,0,0.32);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.rek-stat-label,.rek-board-card-title{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);}
.rek-stat-value{margin-top:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:28px;font-weight:800;letter-spacing:-.8px;color:var(--text);}
.rek-board-card-title{margin-bottom:10px;}
.rek-rank-list,.rek-activity-list{display:grid;gap:10px;}
.rek-rank-row,.rek-activity-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.rek-rank-left{display:flex;align-items:center;gap:10px;min-width:0;}
.rek-rank-num{width:24px;height:24px;border-radius:999px;background:rgba(255,51,85,0.12);border:1px solid rgba(255,51,85,0.16);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--red);}
.rek-rank-name,.rek-activity-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rek-rank-score{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.4px;color:var(--text);}
.rek-activity-row{justify-content:flex-start;gap:8px;flex-wrap:wrap;}
.rek-activity-text{font-size:13px;color:var(--t2);}
.rek-board-empty{font-size:13px;color:var(--t2);line-height:1.55;}
.rek-board-empty.small{padding-top:2px;}

/* ── AI FOLLOW-UP CHIPS ── */
.followup-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;margin-bottom:4px;}
.followup-chip{
  flex-shrink:0;font-size:11px;font-weight:500;
  padding:5px 12px;border-radius:20px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  color:var(--t2);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .1s;
  white-space:nowrap;
}
.followup-chip:active{transform:scale(.92);}
.followup-chip:hover{background:rgba(255,51,85,0.08);border-color:rgba(255,51,85,0.25);color:var(--text);}

/* ── SEND SUCCESS ── */
.send-success-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9998;pointer-events:none;}
.send-success-mark{font-size:72px;line-height:1;color:var(--grn);text-shadow:0 0 40px rgba(46,204,113,0.6);opacity:0;transform:scale(0.4);transition:none;}
.send-success-mark.pop{animation:send-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;}
@keyframes send-pop{0%{opacity:0;transform:scale(0.4);}40%{opacity:1;transform:scale(1.15);}60%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.1);}}

/* ── REK CHAIN ── */
.rek-chain{font-size:11px;color:var(--t3);margin-top:6px;margin-bottom:12px;letter-spacing:-.1px;font-style:italic;}