:root{--black:#0a0a0a;--black2:#111;--black3:#181818;--black4:#222;--black5:#2a2a2a;--gold:#c9a84c;--gold2:#e8c96a;--gold3:#a08030;--white:#fff;--gray:#888;--gray2:#555;--gray3:#333;--green:#4caf7d;--blue:#5b8dee;--red:#e05252;--purple:#b89eff;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:#0a0a0a;font-family:'DM Sans',sans-serif;}
body{display:flex;justify-content:center;align-items:center;}
.device{width:100%;max-width:430px;height:100vh;max-height:926px;background:var(--black);position:relative;overflow:hidden;isolation:isolate;}
@media(min-width:500px){.device{border-radius:44px;border:2px solid var(--black5);box-shadow:0 40px 120px rgba(0,0,0,0.9);}}
.screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.22s ease, visibility 0s linear 0.22s;
  background:var(--black);
}
.screen.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 0.22s ease, visibility 0s linear 0s;
  z-index:1;
}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.scroll::-webkit-scrollbar{display:none;}
.serif{font-family:'Playfair Display',serif;}
.gold{color:var(--gold);}
.logo-e{background:var(--gold);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;color:var(--black);font-weight:600;}
.btn-gold{background:var(--gold);border:none;border-radius:100px;font-family:'DM Sans',sans-serif;font-weight:500;color:var(--black);cursor:pointer;transition:all 0.2s;}
.btn-gold:active{transform:scale(0.98);}
.btn-full{width:100%;padding:15px;font-size:15px;}
.field{background:var(--black3);border:1px solid var(--black5);border-radius:12px;padding:14px 16px;margin-bottom:10px;}
.field label{font-size:10px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:5px;}
.field input,.field textarea{background:none;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:15px;color:var(--white);width:100%;}
.field input::placeholder,.field textarea::placeholder{color:var(--gray2);}
.bnav{position:absolute;bottom:0;left:0;right:0;background:var(--black2);border-top:1px solid var(--black4);display:flex;align-items:center;justify-content:space-around;padding-top:8px;padding-bottom:max(16px, env(safe-area-inset-bottom, 16px));z-index:100;flex-shrink:0;overflow:visible;}
.ni{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:6px 10px;}
.ni-lbl{font-size:9px;color:var(--gray2);}
.ni.on .ni-lbl{color:var(--gold);}
.ni-svg path,.ni-svg rect,.ni-svg circle,.ni-svg polyline{stroke:var(--gray2);}
.ni.on .ni-svg path,.ni.on .ni-svg rect,.ni.on .ni-svg circle,.ni.on .ni-svg polyline{stroke:var(--gold);}
.hdr{padding:max(54px, calc(env(safe-area-inset-top, 50px) + 14px)) 18px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--black3);flex-shrink:0;}
.hdr-title{font-family:'Playfair Display',serif;font-size:24px;color:var(--white);}
.back-btn{width:32px;height:32px;border-radius:50%;background:var(--black3);border:1px solid var(--black5);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:#1a1200;border:1px solid var(--gold3);border-radius:12px;padding:10px 18px;font-size:13px;color:var(--gold);z-index:999;opacity:0;transition:opacity 0.3s;pointer-events:none;max-width:85%;text-align:center;word-wrap:break-word;}
.toast.show{opacity:1;}
.fc{background:var(--black3);border-radius:16px;padding:14px;margin-bottom:10px;border:1px solid var(--black5);}
.fc-top{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.fc-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0;}
.fc-name{font-size:13px;font-weight:500;color:var(--white);}
.fc-meta{font-size:10px;color:var(--gray);margin-top:1px;}
.fc-text{font-size:13px;color:#ccc;line-height:1.6;margin-bottom:10px;white-space:pre-wrap;word-wrap:break-word;}
.badge{display:inline-block;font-size:10px;font-weight:500;padding:2px 9px;border-radius:20px;}
.bwin{background:#0f2a15;color:var(--green);border:1px solid #1e4a25;}
.bdeal{background:#0a1525;color:var(--blue);border:1px solid #162235;}
.bmile{background:#1a1200;color:var(--gold);border:1px solid #2a2000;}
.badge-green{background:#0f2a15;color:var(--green);border:1px solid #1e4a25;}
.badge-blue{background:#0a1525;color:var(--blue);border:1px solid #162235;}
.badge-gold{background:#1a1200;color:var(--gold);border:1px solid #2a2000;}
.badge-rose{background:#2a1420;color:#e8a0c0;border:1px solid #4a2338;}
.badge-purple{background:#1a1025;color:#b89eff;border:1px solid #2a1a45;}
.mem-card{background:var(--black3);border-radius:14px;padding:14px;margin-bottom:8px;border:1px solid var(--black5);display:flex;align-items:center;gap:11px;}
.mem-av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;flex-shrink:0;}
.mem-name{font-size:14px;font-weight:500;color:var(--white);margin-bottom:2px;}
.mem-role{font-size:12px;color:var(--gray);}
.conn-btn{font-size:11px;padding:5px 12px;border-radius:20px;border:1px solid var(--gold);background:transparent;color:var(--gold);cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap;}
.net-sec-hdr{font-size:10px;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;font-family:'DM Sans',sans-serif;}
.net-sec-sub{font-size:11px;color:var(--gray2);margin:-6px 0 12px;}
.net-divider{height:1px;background:rgba(255,255,255,0.06);margin:24px 0;}
.seek-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(10,10,10,0.85);border:1px solid var(--gold3);color:var(--gold);font-size:20px;font-weight:600;line-height:1;cursor:pointer;z-index:2;display:none;align-items:center;justify-content:center;padding:0;font-family:'DM Sans',sans-serif;}
.seek-nav-prev{left:4px;}
.seek-nav-next{right:4px;}
.seek-dot{width:6px;height:6px;border-radius:50%;background:var(--black5);transition:background 0.2s ease,width 0.2s ease;}
.seek-dot.active{background:var(--gold);width:18px;border-radius:3px;}
@media (hover:hover) and (pointer:fine){
  .seek-nav{display:flex;}
}
@keyframes introFade{from{opacity:0;}to{opacity:1;}}
@keyframes introSlideUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.intro-picker-sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:440px;max-height:92vh;overflow-y:auto;background:var(--black3);border:1px solid var(--black5);border-top-left-radius:20px;border-top-right-radius:20px;padding:22px 20px calc(env(safe-area-inset-bottom,16px) + 20px);animation:introSlideUp 0.25s ease-out;}
@media (min-width:520px){
  .intro-picker-sheet{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:16px;padding:24px;max-height:85vh;}
}
.intro-template-card{background:var(--black);border:1px solid var(--black5);border-radius:12px;padding:12px;cursor:pointer;position:relative;transition:border-color 0.15s ease,background 0.15s ease;}
.intro-template-card.selected{border-color:var(--gold);background:#1a1200;}
.intro-template-radio{position:absolute;top:12px;right:12px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--gray2);box-sizing:border-box;transition:border-color 0.15s ease;}
.intro-template-card.selected .intro-template-radio{border-color:var(--gold);}
.intro-template-card.selected .intro-template-radio::after{content:'';display:block;position:absolute;inset:2px;background:var(--gold);border-radius:50%;}
#intro-custom-text:focus{border-color:var(--gold3);}
.disc-row{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 10px;scroll-snap-type:x mandatory;scroll-padding:0 8px;-ms-overflow-style:none;scrollbar-width:none;scroll-behavior:smooth;}
.disc-row::-webkit-scrollbar{display:none;}
@media (hover:hover) and (pointer:fine){
  .disc-row{scrollbar-width:thin;}
  .disc-row::-webkit-scrollbar{display:block;height:6px;}
  .disc-row::-webkit-scrollbar-thumb{background:var(--black5);border-radius:3px;}
}
.disc-card{flex:0 0 140px;scroll-snap-align:start;background:var(--black3);border:1px solid var(--black5);border-radius:12px;padding:12px;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;transition:border-color 0.15s ease,transform 0.12s ease;box-sizing:border-box;}
.disc-card:hover{border-color:var(--gold3);}
.disc-card-av{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--gold);background:#1a1200;display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:'Playfair Display',serif;font-size:18px;font-weight:600;overflow:hidden;margin-bottom:8px;flex-shrink:0;}
.disc-card-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.disc-card-name{font-size:13px;font-weight:600;color:var(--white);line-height:1.3;margin-bottom:2px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.disc-card-sub{font-size:10px;color:var(--gray);margin-bottom:10px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.disc-card-cta{font-size:11px;padding:5px 14px;border-radius:18px;font-family:'DM Sans',sans-serif;white-space:nowrap;cursor:pointer;border:1px solid var(--gold);background:var(--gold);color:var(--black);font-weight:600;}
.disc-card-cta.pending{background:transparent;color:var(--gray2);border-color:var(--gray2);cursor:default;}
.disc-card-cta.connected{background:transparent;color:var(--gold);border-color:var(--gold);}
.disc-card.hidden{display:none;}
/* Phase 3: Expertise + badges */
@keyframes badgeBounce{0%{transform:translateY(40px) scale(0.6);opacity:0;}60%{transform:translateY(-6px) scale(1.08);opacity:1;}100%{transform:translateY(0) scale(1);opacity:1;}}
@keyframes epShimmer{0%{background-position:-180px 0;}100%{background-position:180px 0;}}
.badge-shield{display:inline-block;position:relative;}
.badge-shield svg{display:block;}
.badge-group{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 16px 12px;scroll-snap-type:x mandatory;scroll-padding-left:16px;scroll-padding-right:16px;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;margin:0 -18px 14px;touch-action:pan-x pan-y;}
.badge-group::-webkit-scrollbar{display:none;}
@media (hover:hover) and (pointer:fine){
  .badge-group{scrollbar-width:thin;}
  .badge-group::-webkit-scrollbar{display:block;height:6px;}
  .badge-group::-webkit-scrollbar-thumb{background:var(--black5);border-radius:3px;}
}
.badge-subhdr{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(201,168,76,0.6);margin-bottom:8px;margin-top:4px;font-weight:500;padding-left:0;}
.badge-card{flex:0 0 90px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:8px 6px;background:var(--black3);border:1px solid var(--black5);border-radius:12px;min-height:110px;cursor:pointer;transition:transform 0.12s ease,border-color 0.15s ease;box-sizing:border-box;position:relative;overflow:hidden;}
.badge-card:active{transform:scale(0.96);}
.badge-card.bronze{border-color:rgba(205,127,50,0.4);}
.badge-card.silver{border-color:rgba(192,192,192,0.45);}
.badge-card.gold{border-color:rgba(201,168,76,0.55);background:linear-gradient(160deg,var(--black3) 60%,rgba(201,168,76,0.05) 100%);}
.badge-card.top1{border-color:rgba(180,128,255,0.55);background:linear-gradient(160deg,var(--black3) 60%,rgba(180,128,255,0.08) 100%);}
.badge-card.founding{border-color:rgba(201,168,76,0.7);background:linear-gradient(160deg,#0a0a0a 60%,#1a1200 100%);box-shadow:inset 0 0 0 1px rgba(201,168,76,0.15);}
.badge-card-label{font-size:9px;font-weight:600;letter-spacing:0.7px;text-transform:uppercase;line-height:1.15;text-align:center;margin-top:1px;}
.badge-card-category{font-size:9px;color:var(--gray);line-height:1.2;text-align:center;word-break:break-word;padding:0 1px;}
/* Locked / next-tier preview */
.badge-card.locked{border-color:#333;background:var(--black3);}
.badge-card.locked .badge-shield{opacity:0.35;filter:grayscale(0.5);}
.badge-card.locked .badge-card-label{color:#666 !important;}
.badge-card.locked .badge-card-category{color:#555;}
.badge-card-lock{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,0.65);display:flex;align-items:center;justify-content:center;}
.badge-card .badge-shield{flex:0 0 auto;}
/* Gold shimmer — animated gloss sweep on the shield SVG */
@keyframes goldShimmer{
  0%{filter:drop-shadow(0 0 6px rgba(201,168,76,0.55)) drop-shadow(0 2px 3px rgba(0,0,0,0.35));}
  50%{filter:drop-shadow(0 0 12px rgba(255,215,0,0.85)) drop-shadow(0 2px 3px rgba(0,0,0,0.35));}
  100%{filter:drop-shadow(0 0 6px rgba(201,168,76,0.55)) drop-shadow(0 2px 3px rgba(0,0,0,0.35));}
}
.badge-gold-shimmer{animation:goldShimmer 3s ease-in-out infinite;}
/* Top 1% slight float animation */
@keyframes top1Float{
  0%{transform:translateY(0);}
  50%{transform:translateY(-2px);}
  100%{transform:translateY(0);}
}
.badge-top1-float{animation:top1Float 2s ease-in-out infinite;}
/* Luminary tier — animated holographic halo + traveling shine.
   Wraps the shield SVG so the gradient/animation is visible around the shield edge. */
@keyframes luminary-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes luminary-glow {
  0%, 100% { box-shadow: 0 0 16px rgba(201, 168, 76, 0.4), 0 0 32px rgba(170, 100, 220, 0.25); }
  50%      { box-shadow: 0 0 24px rgba(201, 168, 76, 0.6), 0 0 48px rgba(170, 100, 220, 0.4); }
}
@keyframes luminary-shine {
  0%   { transform: translateX(-100%) skewX(-20deg); }
  100% { transform: translateX(200%) skewX(-20deg); }
}
.luminary-badge {
  position: relative;
  background: linear-gradient(
    135deg,
    #c9a84c 0%,
    #e8d28a 20%,
    #aa64dc 45%,
    #c9c9d1 65%,
    #e8d28a 85%,
    #c9a84c 100%
  );
  background-size: 300% 300%;
  animation: luminary-shimmer 6s ease-in-out infinite,
             luminary-glow 3s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.luminary-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: luminary-shine 4s ease-in-out infinite;
  pointer-events: none;
}
/* Card-level styling for a luminary badge in the profile badge row */
.badge-card.luminary{
  border-color:rgba(201,168,76,0.7);
  background:linear-gradient(160deg,var(--black3) 55%,rgba(170,100,220,0.08) 100%);
  /* Same footprint as other tiers — animations + starburst do the heavy lifting */
  position: relative;
  z-index: 2;
}
.badge-card.luminary::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,240,180,0.9) 0%, transparent 1.5%),
    radial-gradient(circle at 85% 30%, rgba(255,240,180,0.9) 0%, transparent 1%),
    radial-gradient(circle at 25% 75%, rgba(170,100,220,0.8) 0%, transparent 1.2%),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,0.9) 0%, transparent 1%),
    radial-gradient(circle at 50% 10%, rgba(255,240,180,0.7) 0%, transparent 1%),
    radial-gradient(circle at 90% 60%, rgba(170,100,220,0.7) 0%, transparent 0.8%),
    radial-gradient(circle at 10% 50%, rgba(255,255,255,0.7) 0%, transparent 1%),
    radial-gradient(circle at 60% 90%, rgba(255,240,180,0.8) 0%, transparent 1%);
  pointer-events: none;
  animation: luminary-particles 8s linear infinite;
  border-radius: inherit;
  z-index: -1;
}
@keyframes luminary-particles {
  0%   { opacity: 0.4; transform: rotate(0deg) scale(1); }
  25%  { opacity: 1;   transform: rotate(90deg) scale(1.05); }
  50%  { opacity: 0.6; transform: rotate(180deg) scale(1); }
  75%  { opacity: 1;   transform: rotate(270deg) scale(1.05); }
  100% { opacity: 0.4; transform: rotate(360deg) scale(1); }
}
.badge-card.luminary .badge-card-label {
  font-weight: 600;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(232, 210, 138, 0.6);
}
.luminary-rarity-tag {
  margin-top: 4px;
  font-size: 8px;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: #f5e6a8;
  background: linear-gradient(90deg, rgba(170,100,220,0.3), rgba(201,168,76,0.3));
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(232, 210, 138, 0.4);
  display: inline-block;
  white-space: nowrap;
}
/* Mutual match modal */
@keyframes mmFade{from{opacity:0;}to{opacity:1;}}
@keyframes mmAvatarIn{from{opacity:0;transform:scale(0.4) translateY(20px);}60%{opacity:1;transform:scale(1.08) translateY(-4px);}100%{opacity:1;transform:scale(1) translateY(0);}}
@keyframes mmHeadingIn{from{opacity:0;transform:scale(0.85);}to{opacity:1;transform:scale(1);}}
@keyframes mmFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes mmSparkPulse{0%,100%{transform:scale(1) rotate(0deg);opacity:0.65;}50%{transform:scale(1.3) rotate(20deg);opacity:1;}}
@keyframes mmParticle{0%{opacity:0;transform:translateY(40px);}30%{opacity:0.9;}80%{opacity:0.5;}100%{opacity:0;transform:translateY(-180px);}}
.mm-heading{animation:mmHeadingIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;}
.mm-subtitle{animation:mmFadeUp 0.4s ease-out 0.5s both;}
.mm-av{width:80px;height:80px;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 24px rgba(201,168,76,0.45);overflow:hidden;flex-shrink:0;}
.mm-av-mine{animation:mmAvatarIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;}
.mm-av-theirs{animation:mmAvatarIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.4s both;}
.mm-spark{font-size:24px;animation:mmSparkPulse 1.6s ease-in-out infinite,mmFadeUp 0.4s ease-out 0.6s both;}
.mm-info{animation:mmFadeUp 0.4s ease-out 0.7s both;}
.mm-ctas{animation:mmFadeUp 0.4s ease-out 0.85s both;}
.mm-particles{position:absolute;inset:0;pointer-events:none;z-index:1;}
.mm-particle{position:absolute;bottom:30%;border-radius:50%;background:radial-gradient(circle,#FFE97A,#C9A84C);box-shadow:0 0 8px rgba(201,168,76,0.7);animation:mmParticle 4s ease-in-out infinite;opacity:0;}
/* Cofound chip pickers (Looking for / Offering) */
.cf-chip{font-size:12px;background:var(--black3);border:1.5px solid var(--black5);border-radius:20px;padding:5px 12px;color:var(--gray);cursor:pointer;font-family:'DM Sans',sans-serif;transition:border-color 0.15s ease,background 0.15s ease,color 0.15s ease;line-height:1.3;display:inline-flex;align-items:center;gap:5px;}
.cf-chip.sel{border-color:var(--gold);background:linear-gradient(135deg,#1a1200,#2a1f00);color:var(--white);box-shadow:inset 0 0 0 1px rgba(201,168,76,0.25);font-weight:500;}
.cf-chip-custom{font-size:12px;background:transparent;border:1.5px dashed var(--gold);border-radius:20px;padding:5px 12px;color:var(--gold);cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;}
.cf-chip-remove{font-size:11px;color:var(--gold);opacity:0.85;line-height:1;cursor:pointer;padding:0 0 0 2px;}
.cf-chip-remove:hover{opacity:1;}
@media (hover:hover) and (pointer:fine){
  .cf-chip:hover{border-color:var(--gold3);}
}
/* Welcome modal animations */
@keyframes welcomeIn{from{opacity:0;transform:translate(-50%,-50%) scale(0.85);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes welcomeStepIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.welcome-heading{animation:welcomeStepIn 0.4s ease-out 0.1s both;}
.welcome-subtitle{animation:welcomeStepIn 0.4s ease-out 0.2s both;}
.welcome-step{animation:welcomeStepIn 0.4s ease-out 0.35s both;}
.welcome-step-2{animation-delay:0.45s;}
.welcome-step-3{animation-delay:0.55s;}
.welcome-ctas{animation:welcomeStepIn 0.4s ease-out 0.7s both;}
.ep-row{padding:10px 0;border-top:1px solid var(--black4);}
.ep-row:first-child{border-top:none;padding-top:0;}
.ep-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px;}
.ep-row-category{font-size:13px;color:var(--white);font-weight:500;}
.ep-row-tier{font-size:10px;color:var(--gold);letter-spacing:0.8px;text-transform:uppercase;}
.ep-progress{height:6px;background:var(--black);border-radius:3px;overflow:hidden;margin-bottom:4px;}
.ep-progress-fill{height:100%;background:linear-gradient(90deg,#c9a84c 0%,#f7e060 50%,#c9a84c 100%);background-size:180px 100%;border-radius:3px;transition:width 0.4s ease;animation:epShimmer 3s linear infinite;}
.ep-row-goal{font-size:10px;color:var(--gray);}
.intro-banner-btn{flex:1;padding:8px 12px;border-radius:18px;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;min-height:36px;}
.intro-banner-btn-primary{background:var(--gold);border:none;color:var(--black);}
.intro-banner-btn-ghost{background:transparent;border:1px solid var(--gold3);color:var(--gold);}
/* Phase 4: Inline badge next to names */
.badge-inline{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;margin-left:5px;cursor:help;flex-shrink:0;}
.badge-inline svg{display:block;}
@media (hover:hover) and (pointer:fine){
  .badge-inline:hover{filter:brightness(1.1);}
}
.conn-avatar-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 0 8px;-ms-overflow-style:none;scrollbar-width:none;}
.conn-avatar-scroll::-webkit-scrollbar{display:none;}
.conn-avatar-item{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:72px;cursor:pointer;touch-action:manipulation;}
.conn-avatar-item .av{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;background:#1a1200;color:var(--gold);overflow:hidden;flex-shrink:0;}
.conn-avatar-item .av img{width:100%;height:100%;object-fit:cover;}
.conn-avatar-item .name{font-size:11px;color:var(--white);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72px;}
.net-empty{font-size:12px;color:var(--gray2);padding:14px 2px;line-height:1.55;}
.seek-card{background:var(--black3);border:1px solid var(--black5);border-radius:12px;padding:12px;margin-bottom:8px;display:flex;align-items:center;gap:11px;touch-action:manipulation;}
.seek-tag{display:inline-block;font-size:10px;color:var(--gold);background:rgba(201,168,76,0.10);border:1px solid rgba(201,168,76,0.30);padding:2px 8px;border-radius:10px;margin-top:3px;letter-spacing:0.3px;}
.deal-card{background:var(--black3);border-radius:16px;padding:16px;margin-bottom:10px;border:1px solid var(--black5);}
.deal-title{font-size:15px;font-weight:500;color:var(--white);margin-bottom:6px;}
.deal-desc{font-size:13px;color:var(--gray);line-height:1.6;margin-bottom:12px;}
.lb-row{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--black3);}
.lb-row.you{background:#0f0c00;}
.lb-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0;}
/* LIVE ROOM */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.3);}}
.stage-person{display:flex;flex-direction:column;align-items:center;gap:6px;}
.ctrl-circle{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.host-panel{position:absolute;bottom:0;left:0;right:0;background:var(--black2);border-radius:24px 24px 0 0;padding:20px 18px 30px;z-index:100;transform:translateY(100%);transition:transform 0.3s;}
.host-panel.open{transform:translateY(0);}
@keyframes wave{0%,100%{transform:scaleY(0.5);}50%{transform:scaleY(1.5);}}
.sw-bar{width:2px;background:var(--green);border-radius:1px;animation:wave 0.8s ease-in-out infinite;}
.sw-bar:nth-child(2){animation-delay:0.15s;}
.sw-bar:nth-child(3){animation-delay:0.3s;}
.sw-bar:nth-child(4){animation-delay:0.15s;}
/* MENTOR */
.mentor-card{background:var(--black3);border-radius:18px;padding:16px;margin-bottom:12px;border:1px solid var(--black5);cursor:pointer;}
.service-card{background:var(--black3);border-radius:14px;padding:14px;margin-bottom:8px;border:1px solid var(--black5);display:flex;align-items:flex-start;gap:12px;}
.time-slot{background:var(--black3);border:1.5px solid var(--black5);border-radius:10px;padding:11px 14px;margin-bottom:7px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
.time-slot.sel{border-color:var(--gold);background:#1a1200;}
.time-slot.sel .ts-time{color:var(--gold);}
.ts-time{font-size:14px;font-weight:500;color:var(--white);}
/* GROUPS */
/* ACCOUNTABILITY */
.goal-set{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--black4);}
.goal-set:last-child{border-bottom:none;}
.goal-cb{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--black5);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.goal-cb.done{background:var(--gold);border-color:var(--gold);}
/* REFUND / REPORT */
.r-opt{background:var(--black3);border:1.5px solid var(--black5);border-radius:12px;padding:13px 14px;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;gap:10px;}
.r-opt.sel{border-color:var(--gold);background:#1a1200;}
.r-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--gray2);flex-shrink:0;}
.r-opt.sel .r-dot{background:var(--gold);border-color:var(--gold);}
/* PROFILE */
.cover{height:70px;position:relative;overflow:hidden;flex-shrink:0;}
.pav-wrap{padding:0 18px;margin-top:-28px;display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px;flex-shrink:0;}
.stat-strip{display:flex;border-top:1px solid var(--black3);border-bottom:1px solid var(--black3);flex-shrink:0;}
.stat{flex:1;padding:12px 8px;text-align:center;border-right:1px solid var(--black3);}
.stat:last-child{border-right:none;}
.sn{font-size:17px;font-weight:500;color:var(--gold);}
.sl{font-size:9px;color:var(--gray);margin-top:1px;}




/* Floor reflection */
.lux-floor {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 30px;
  background: radial-gradient(ellipse,
    rgba(201,168,76,0.3) 0%,
    transparent 70%);
  filter: blur(6px);
  animation: floor-breathe 4s ease-in-out infinite;
}
@keyframes floor-breathe {
  0%,100% { opacity: 0.5; width: 70px; }
  50%     { opacity: 0.9; width: 100px; }
}

/* ============================================
   HIGH IMPACT UI UPGRADES
   ============================================ */

/* 1. SCREEN TRANSITIONS */
.screen.slide-in {
  animation: slideIn 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.screen.slide-back {
  animation: slideBack 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0.8; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideBack {
  from { transform: translateX(-30%); opacity: 0.8; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* 2. GOLD NAV GLOW */
.ni.on .ni-lbl {
  color: var(--gold);
}
.ni.on::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(201,168,76,0.8), 0 0 20px rgba(201,168,76,0.4);
}
.ni {
  position: relative;
}

/* 3. BUTTON MICRO-ANIMATIONS */
.btn-gold {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-gold:active {
  transform: scale(0.94);
  box-shadow: 0 0 20px rgba(201,168,76,0.5);
}
.conn-btn {
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.conn-btn:active {
  transform: scale(0.92);
}

/* 4. CARD HOVER/TAP EFFECT */
.fc {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fc:active {
  transform: scale(0.985);
}
.mem-card {
  transition: transform 0.15s ease;
}
.mem-card:active {
  transform: scale(0.97);
}

/* 5. LIKE BUTTON BOUNCE */
@keyframes likeBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.5); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.like-bouncing {
  display: inline-block;
  animation: likeBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 6. POINTS FLYING ANIMATION */
.pts-fly {
  position: absolute;
  z-index: 9999;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  font-family: 'DM Sans', sans-serif;
  pointer-events: none;
  z-index: 9999;
  text-shadow: 0 0 10px rgba(201,168,76,0.8);
  animation: ptsFly 1.4s ease-out forwards;
}
@keyframes ptsFly {
  0%   { transform: translateY(0) scale(0.5);   opacity: 0; }
  20%  { transform: translateY(-10px) scale(1.2); opacity: 1; }
  80%  { transform: translateY(-60px) scale(1);  opacity: 0.8; }
  100% { transform: translateY(-90px) scale(0.8); opacity: 0; }
}

/* 7. VERIFIED BADGE SHIMMER */
@keyframes badgeShimmer {
  0%   { box-shadow: 0 0 4px rgba(201,168,76,0.3), inset 0 0 4px rgba(201,168,76,0.1); }
  50%  { box-shadow: 0 0 14px rgba(201,168,76,0.9), inset 0 0 8px rgba(201,168,76,0.3); }
  100% { box-shadow: 0 0 4px rgba(201,168,76,0.3), inset 0 0 4px rgba(201,168,76,0.1); }
}
.badge-shimmer {
  animation: badgeShimmer 2s ease-in-out infinite !important;
}

/* 8. CONNECT BUTTON GOLD RIPPLE */
@keyframes goldRipple {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,0.6); }
  100% { box-shadow: 0 0 0 16px rgba(201,168,76,0); }
}
.connect-ripple {
  animation: goldRipple 0.6s ease-out;
}

/* 9. TOAST SLIDE UP */
.toast {
  animation: none;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateX(-50%) translateY(10px);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 10. NAV TAB ICON BOUNCE ON TAP */
@keyframes navBounce {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-4px); }
  70%     { transform: translateY(1px); }
}
.ni-bounce .ni-svg {
  animation: navBounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ============ SWIPE MATCH ============ */
.swipe-card {
  touch-action: none;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: grab;
  position: relative;
}
.swipe-card.dragging {
  transition: none;
  cursor: grabbing;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.swipe-card.fly-left {
  animation: flyLeft 0.22s cubic-bezier(0.55,0,1,0.45) forwards;
}
.swipe-card.fly-right {
  animation: flyRight 0.22s cubic-bezier(0.55,0,1,0.45) forwards;
}
.swipe-card.fly-up {
  animation: flyUp 0.2s cubic-bezier(0.55,0,1,0.45) forwards;
}
@keyframes flyLeft {
  to { transform: translateX(-130%) rotate(-20deg); opacity: 0; }
}
@keyframes flyRight {
  to { transform: translateX(130%) rotate(20deg); opacity: 0; }
}
@keyframes flyUp {
  to { transform: translateY(-120%) scale(0.8); opacity: 0; }
}

/* SWIPE LABELS */
.swipe-label {
  position: absolute;
  top: 20px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 6px 14px;
  border-radius: 8px;
  border-width: 3px;
  border-style: solid;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  z-index: 10;
}
.swipe-label-pass {
  right: 20px;
  color: #e05252;
  border-color: #e05252;
  transform: rotate(15deg);
}
.swipe-label-connect {
  left: 20px;
  color: #4caf7d;
  border-color: #4caf7d;
  transform: rotate(-15deg);
}

/* ACTION BUTTONS PULSE */
@keyframes btnPulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.btn-pulse { animation: btnPulse 0.3s ease; }


/* ============ LIGHT MODE ============ */
body.light-mode {
  --black: #f5f5f0;
  --black2: #ebebE5;
  --black3: #e0e0d8;
  --black4: #d5d5cc;
  --black5: #c5c5bc;
  --white: #0a0a0a;
  --gray: #555;
  --gray2: #777;
  --gray3: #999;
}
body.light-mode .device {
  background: #f5f5f0;
  border-color: #ddd;
  box-shadow: 0 40px 120px rgba(0,0,0,0.25);
}
body.light-mode .screen {
  background: #f5f5f0;
}
body.light-mode .fc {
  background: #fff;
  border-color: #e0e0d8;
}
body.light-mode .mem-card {
  background: #fff;
  border-color: #e0e0d8;
}
body.light-mode .deal-card {
  background: #fff;
  border-color: #e0e0d8;
}
body.light-mode .bnav {
  background: #ebebE5;
  border-top-color: #d5d5cc;
}
body.light-mode .hdr {
  border-bottom-color: #e0e0d8;
}
body.light-mode .field {
  background: #fff;
  border-color: #d5d5cc;
}
body.light-mode .field input,
body.light-mode .field textarea,
body.light-mode .field select {
  color: #0a0a0a;
}
body.light-mode .toast {
  background: #fff8e0;
  border-color: var(--gold3);
}
body.light-mode .back-btn {
  background: #e0e0d8;
  border-color: #c5c5bc;
}
body.light-mode textarea,
body.light-mode input {
  color: #0a0a0a;
}
body.light-mode .fc-text { color: #333; }
body.light-mode .ni-lbl { color: #999; }
body.light-mode .ni.on .ni-lbl { color: var(--gold); }
body.light-mode #splash { background: #f5f5f0 !important; }


.cover-swatch { position: relative; transition: transform 0.15s, box-shadow 0.15s; }
.cover-swatch:active { transform: scale(0.95); }
.selected-swatch { border: 2px solid var(--gold) !important; box-shadow: 0 0 12px rgba(201,168,76,0.4); }


.swipe-label-save {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(201,168,76,0.18);
  border: 3px solid var(--gold);
  color: var(--gold);
  border-radius: 12px;
  padding: 8px 20px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 3px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  text-shadow: 0 2px 10px rgba(201,168,76,0.5);
}


.dismiss-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--black5);
  background: transparent;
  color: var(--gray);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.dismiss-btn:active {
  background: #1a0505;
  color: var(--red);
  border-color: #3a1010;
}


@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg) scale(0); opacity: 1; }
  20%  { transform: translateY(-60px) rotate(120deg) scale(1); opacity: 1; }
  100% { transform: translateY(-200px) rotate(400deg) scale(0.5); opacity: 0; }
}


#story-editable:empty:before {
  content: attr(data-placeholder);
  color: rgba(255,255,255,0.3);
  pointer-events: none;
}


.notif-row {
  position: relative;
  transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  overflow: hidden;
}
.notif-x {
  position: absolute;
  top: 14px;
  right: 14px;
  transform: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--black4);
  border: 1px solid var(--black5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  color: var(--gray);
  flex-shrink: 0;
  z-index: 2;
}
.notif-x:hover { background: var(--red); color: white; }

@keyframes eFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes eGlow{0%,100%{filter:drop-shadow(0 0 20px rgba(201,168,76,0.9)) drop-shadow(0 0 50px rgba(201,168,76,0.5))}50%{filter:drop-shadow(0 0 40px rgba(232,201,106,1)) drop-shadow(0 0 90px rgba(201,168,76,0.8))}}
@keyframes goldFlow{0%,100%{background-position:50% 0%}50%{background-position:50% 100%}}
@keyframes ringA{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ringB{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes orbitDot{from{transform:rotate(0deg) translateX(62px)}to{transform:rotate(360deg) translateX(62px)}}
@keyframes haloPulse{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.2);opacity:1}}
@keyframes linePulse{0%,100%{width:0;opacity:0}40%,60%{width:160px;opacity:1}}
@keyframes dotGlow{0%,100%{box-shadow:0 0 8px 3px rgba(201,168,76,0.6)}50%{box-shadow:0 0 18px 7px rgba(201,168,76,1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes bgPulse{0%,100%{opacity:0.6}50%{opacity:1}}