:root{--bg:#06040b;--panel:#110c19;--panel2:#171022;--line:#322044;--text:#fff;--muted:#bdb2cd;--purple:#a92cff;--purple2:#6f2cff;--pink:#e652d6;--gold:#f2b65e;--green:#55e6a5;--red:#ff6882}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,rgba(93,36,185,.2),transparent 34%),linear-gradient(180deg,#080510,#050309);color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;min-height:100vh}button,input,select,textarea{font:inherit}.top{position:sticky;top:0;z-index:50;background:rgba(5,3,10,.9);backdrop-filter:blur(22px);border-bottom:1px solid rgba(133,69,181,.22)}.topin{max-width:1440px;margin:auto;padding:14px 24px;display:flex;align-items:center;gap:18px}.brand{font-size:25px;font-weight:950;display:flex;gap:10px;align-items:center}.mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#6d24ff,#bd2dff);box-shadow:0 0 28px rgba(169,44,255,.45);display:grid;place-items:center}.nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}.nav button,.btn{background:linear-gradient(180deg,#12101a,#0b0910);color:#fff;border:1px solid #2d2740;border-radius:12px;padding:10px 15px;font-weight:850;cursor:pointer}.btn.primary{background:linear-gradient(135deg,#6f2cff,#be2aff);border-color:transparent;box-shadow:0 8px 26px rgba(148,43,255,.24)}.wrap{max-width:1440px;margin:auto;padding:32px 24px 86px}.footer{padding:30px;text-align:center;color:#82768f;border-top:1px solid rgba(112,74,140,.22)}.hero{position:relative;overflow:hidden;border-radius:28px;min-height:565px;padding:92px 30px 70px;text-align:center;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 95%,rgba(120,20,255,.45),transparent 26%),linear-gradient(180deg,#090510,#0b0613);border:1px solid rgba(137,57,205,.26)}.hero:before{content:"";position:absolute;left:12%;right:12%;bottom:34px;height:68px;border-radius:50%;border:4px solid #9136ff;box-shadow:0 0 18px #7e2cff,0 0 38px rgba(108,45,255,.9);transform:perspective(420px) rotateX(70deg)}.heroInner{position:relative;z-index:2;max-width:1000px}.eyebrow{display:inline-block;padding:8px 14px;border:1px solid #653883;border-radius:100px;color:#edc4ff;font-size:12px;font-weight:950;letter-spacing:.09em}.hero h1{font-size:clamp(54px,7vw,96px);line-height:.96;margin:22px auto 18px;letter-spacing:-.06em}.grad{background:linear-gradient(90deg,#a982ff,#d445ff,#f1a772);-webkit-background-clip:text;color:transparent}.hero p,.muted{color:var(--muted)}.hero p{font-size:19px;line-height:1.5;max-width:760px;margin:0 auto 26px}.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.featureRow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.card,.featureCard,.item{background:linear-gradient(180deg,rgba(20,15,30,.97),rgba(10,8,16,.97));border:1px solid rgba(84,52,111,.55);border-radius:18px;box-shadow:0 18px 55px rgba(0,0,0,.3)}.featureCard,.card{padding:22px}.featureCard{text-align:center}.iconOrb{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;margin:0 auto 15px;background:radial-gradient(circle at 40% 35%,#5725a9,#160928 70%);border:1px solid #6d2ca0;box-shadow:0 0 25px rgba(147,33,255,.25);font-size:27px}.section{margin-top:38px}.sectionhead{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}.sectionhead h1,.sectionhead h2{font-size:clamp(32px,4vw,48px);margin:0;letter-spacing:-.04em}.sectionhead p{margin:7px 0 0;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.directoryHero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:300px;margin:-32px -24px 22px;padding:45px 24px;border-bottom:1px solid rgba(111,44,255,.22);background:radial-gradient(circle at 78% 45%,rgba(121,28,230,.22),transparent 32%)}.directoryHero h1{font-size:clamp(42px,5vw,70px);line-height:1.02;margin:12px 0;letter-spacing:-.05em}.heroArt{height:240px;display:grid;place-items:center;font-size:108px;filter:drop-shadow(0 0 28px rgba(180,57,255,.55))}.searchbar{display:grid;grid-template-columns:1.2fr 1fr auto;gap:10px;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(21,14,31,.9);margin:18px 0}.input,textarea,select{width:100%;background:#0b0711;border:1px solid #30203f;color:#fff;border-radius:11px;padding:12px 13px;outline:none}.input:focus,textarea:focus,select:focus{border-color:#8e3dcc;box-shadow:0 0 0 3px rgba(157,53,255,.09)}textarea{min-height:120px;resize:vertical}form{display:grid;gap:13px}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.field{display:grid;gap:6px}.field label{font-size:13px;color:#d8cfe3}.directoryList,.list{display:grid;gap:14px}.profileCard{display:grid;grid-template-columns:160px 1fr auto;gap:18px;align-items:center;padding:18px;border:1px solid rgba(121,48,173,.55);border-radius:18px;background:linear-gradient(100deg,rgba(18,12,27,.98),rgba(8,6,13,.98))}.profileThumb{width:160px;height:112px;border-radius:15px;object-fit:cover;background:#170b25;border:1px solid #65299b}.avatar{width:116px;height:116px;border-radius:28px;object-fit:cover;background:#170b25;border:1px solid #65299b;box-shadow:0 0 30px rgba(147,40,255,.22)}.meta{display:flex;gap:12px;flex-wrap:wrap;color:#c7bbd3;font-size:14px}.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;border:1px solid var(--line)}.badge.open,.badge.active,.badge.available,.badge.hired{color:#86f0bf;border-color:#1f7850}.sidebarLayout{display:grid;grid-template-columns:250px 1fr;gap:20px}.side{position:sticky;top:88px;align-self:start;padding:18px;background:linear-gradient(180deg,#15101e,#0c0911);border:1px solid var(--line);border-radius:18px}.side button{width:100%;text-align:left;margin:3px 0;background:transparent;border:0;color:#ddd3e8;padding:11px 12px;border-radius:10px;cursor:pointer}.side button.active,.side button:hover{background:linear-gradient(90deg,#52208a,#2c123f);box-shadow:inset 3px 0 #af37ff}.panel{min-height:640px}.profileHeroCard{display:grid;grid-template-columns:135px 1fr auto;gap:18px;align-items:center;margin-bottom:16px;padding:20px;border:1px solid #45216b;border-radius:18px;background:linear-gradient(100deg,#171020,#0b0710)}.uploadBox{position:relative;width:max-content}.uploadBox input{position:absolute;inset:0;opacity:0;cursor:pointer}.uploadHint{font-size:12px;color:var(--muted);text-align:center;margin-top:7px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi{padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#16101f,#0d0912)}.kpi b{font-size:30px;display:block;margin-top:5px}.item{padding:17px}.itemline{display:flex;justify-content:space-between;gap:14px;align-items:start}.jobCard{display:grid;grid-template-columns:92px 1fr auto;gap:18px;align-items:center}.jobIcon{width:92px;height:92px;border-radius:18px;display:grid;place-items:center;font-size:42px;border:1px solid #6f2c99;background:radial-gradient(circle,#461a65,#0f0818)}.chat{display:grid;grid-template-columns:280px 1fr;gap:14px}.thread{border:1px solid var(--line);border-radius:14px;padding:14px;background:#0c0911}.bubble{max-width:78%;padding:11px 13px;border-radius:14px;margin:8px 0;background:#1c1528}.bubble.mine{margin-left:auto;background:#4b1975}.notice{padding:13px 15px;border:1px solid #543673;background:#171022;border-radius:12px;color:#e7d9f4}.error{border-color:#7f2944;background:#211019;color:#ffc4d0}.ok{border-color:#2e6f50;background:#0e2118;color:#bdf1d5}.pricingHero{display:grid;grid-template-columns:1fr .75fr;gap:25px;align-items:center}.pricingHero h1{font-size:clamp(46px,5vw,72px);line-height:1;margin:0 0 14px}.priceArt{min-height:230px;display:grid;place-items:center;font-size:112px;background:radial-gradient(circle,rgba(159,43,255,.22),transparent 58%)}.price{font-size:40px;font-weight:950;margin:12px 0}.period{font-size:14px;color:var(--muted)}.checks{display:grid;gap:8px;margin:18px 0}.checks span:before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#7c28c4;margin-right:8px;font-size:11px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:11px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}.full{width:100%}@media(max-width:1000px){.featureRow,.grid,.kpis{grid-template-columns:repeat(2,1fr)}.sidebarLayout{grid-template-columns:1fr}.side{position:static}.chat{grid-template-columns:1fr}.directoryHero{grid-template-columns:1fr}.heroArt{display:none}.profileCard{grid-template-columns:120px 1fr}.profileThumb{width:120px;height:100px}}@media(max-width:700px){.nav{display:none}.wrap{padding:20px 14px 60px}.hero{min-height:500px;padding:65px 18px}.featureRow,.grid,.kpis,.row,.pricingHero{grid-template-columns:1fr}.profileCard,.profileHeroCard,.jobCard{grid-template-columns:1fr}.profileThumb{width:100%;height:180px}.searchbar{grid-template-columns:1fr}}

/* =========================================================
   DANCEHIRES V4 WOW AVAILABILITY
   ========================================================= */

.availabilityPage{
  padding-bottom:50px;
}

.availabilityHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:24px;
}

.availabilityHeader h2{
  margin:4px 0 5px;
  font-size:42px;
  line-height:1;
  letter-spacing:-1.5px;
}

.availabilityHeader p{
  margin:0;
  color:#b7abc3;
  font-size:16px;
}

.availabilityEyebrow{
  color:#bd76ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.7px;
}

.availabilityLegend{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  color:#c5b9ce;
  font-size:12px;
}

.availabilityLegend span{
  display:flex;
  align-items:center;
  gap:7px;
}

.legendDot{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
  background:#41394b;
}

.legendDot.available{
  background:#a12cff;
  box-shadow:0 0 12px rgba(161,44,255,.75);
}

.legendDot.unavailable{
  background:#e15a7b;
}

.legendDot.open{
  background:#50465a;
}

.availabilityStats{
  display:grid;
  grid-template-columns:1fr 1fr 1.5fr;
  gap:14px;
  margin-bottom:18px;
}

.availabilityStat{
  min-height:105px;
  border:1px solid #3a244c;
  border-radius:18px;
  padding:20px;
  background:
    radial-gradient(circle at 0 0,rgba(129,37,210,.15),transparent 55%),
    #110b17;
  display:flex;
  align-items:center;
  gap:15px;
}

.availabilityStat span{
  display:block;
  color:#8e819b;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
}

.availabilityStat strong{
  display:block;
  color:#fff;
  font-size:29px;
  margin-top:3px;
}

.availabilityStat strong.statText{
  font-size:18px;
}

.availabilityStat small{
  display:block;
  color:#8e819b;
  margin-top:2px;
}

.statIcon{
  width:48px;
  height:48px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
  background:linear-gradient(145deg,#6c1fd1,#bb27ff);
  box-shadow:0 0 25px rgba(153,38,255,.25);
}

.unavailableIcon{
  background:#25111b;
  color:#f27997;
  border:1px solid #5a2738;
  box-shadow:none;
}

.availabilityCalendarCard{
  border:1px solid #3a244c;
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0,rgba(113,26,179,.12),transparent 45%),
    #0d0812;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}

.calendarToolbar{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 20px;
  border-bottom:1px solid #2c1c39;
}

.calendarMonthControls{
  display:flex;
  align-items:center;
  gap:15px;
}

.calendarArrow{
  width:39px;
  height:39px;
  border-radius:12px;
  border:1px solid #3a2947;
  background:#17101e;
  color:white;
  cursor:pointer;
  font-size:24px;
  transition:.18s ease;
}

.calendarArrow:hover{
  border-color:#a632ff;
  background:#22102f;
  transform:translateY(-1px);
}

.calendarMonth{
  min-width:170px;
  color:#fff;
  font-size:21px;
  font-weight:900;
}

.calendarSub{
  color:#7f7388;
  font-size:11px;
  margin-top:2px;
}

.calendarActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.dangerSoft{
  color:#dca8b6 !important;
}

.calendarWeek{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding:0 12px;
  border-bottom:1px solid #2c1c39;
  background:#0b070f;
}

.calendarWeek div{
  text-align:center;
  padding:13px 4px;
  color:#74697d;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}

.availabilityCalendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding:12px;
  gap:7px;
}

.calendarDay{
  position:relative;
  min-height:104px;
  border:1px solid #2c2134;
  border-radius:13px;
  background:#120d17;
  color:white;
  padding:11px;
  text-align:left;
  cursor:pointer;
  transition:.16s ease;
  overflow:hidden;
}

.calendarDay:hover{
  border-color:#7131a2;
  transform:translateY(-1px);
  background:#18101f;
}

.calendarDay.empty{
  cursor:default;
  opacity:.28;
  background:#09070c;
}

.calendarDay.empty:hover{
  transform:none;
  border-color:#2c2134;
}

.dayNumber{
  display:block;
  font-size:15px;
  font-weight:800;
  position:relative;
  z-index:2;
}

.dayStatus{
  position:absolute;
  left:10px;
  bottom:10px;
  font-size:10px;
  font-weight:800;
  z-index:2;
}

.calendarDay.available{
  border-color:#8530c9;
  background:
    radial-gradient(circle at 80% 20%,rgba(190,48,255,.28),transparent 45%),
    linear-gradient(145deg,#21102f,#140a1d);
  box-shadow:inset 0 0 25px rgba(142,39,219,.08);
}

.calendarDay.available:after{
  content:'✓';
  position:absolute;
  top:9px;
  right:10px;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#9427e7;
  font-size:11px;
  font-weight:900;
  box-shadow:0 0 15px rgba(159,39,240,.38);
}

.calendarDay.available .dayStatus{
  color:#d79cff;
}

.calendarDay.unavailable{
  border-color:#522b39;
  background:
    radial-gradient(circle at 80% 20%,rgba(170,52,86,.14),transparent 45%),
    #160d13;
}

.calendarDay.unavailable:after{
  content:'×';
  position:absolute;
  top:9px;
  right:10px;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ef7894;
  background:#32151f;
  border:1px solid #693043;
  font-size:15px;
  font-weight:900;
}

.calendarDay.unavailable .dayStatus{
  color:#dc8095;
}

.calendarDay.today{
  outline:1px solid #d16cff;
  outline-offset:-4px;
}

.todayLabel{
  position:absolute;
  top:36px;
  left:10px;
  color:#b769f2;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
}

.calendarHelp{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:16px 20px;
  border-top:1px solid #2c1c39;
  background:#0b070f;
}

.calendarHelp b{
  display:block;
  font-size:12px;
}

.calendarHelp span{
  display:block;
  color:#766b80;
  font-size:10px;
  margin-top:2px;
}

.autosaveIndicator{
  display:flex;
  align-items:center;
  gap:7px;
  color:#8d8197;
  font-size:11px;
  white-space:nowrap;
}

.autosaveDot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7e2cc0;
  box-shadow:0 0 10px rgba(156,44,226,.7);
}

.autosaveIndicator.saved{
  color:#d8a8ff;
}

.upcomingAvailability{
  margin-top:20px;
  border:1px solid #352241;
  border-radius:20px;
  background:#100a15;
  padding:21px;
}

.upcomingHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.upcomingHead h3{
  margin:4px 0 0;
  font-size:21px;
}

.upcomingTotal{
  color:#a68eaf;
  font-size:11px;
}

.availabilityEmpty{
  min-height:100px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:18px;
  border:1px dashed #382745;
  border-radius:15px;
  color:#95899f;
}

.availabilityEmpty b{
  color:#ddd3e3;
  display:block;
}

.availabilityEmpty span{
  display:block;
  font-size:12px;
  margin-top:4px;
}

.emptyCalendarIcon{
  width:48px;
  height:48px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1c1026;
  color:#ad4cef;
  font-size:24px;
}

.upcomingGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}

.upcomingDate{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid #30203a;
  border-radius:14px;
  background:#130d18;
}

.upcomingDateBox{
  width:52px;
  height:55px;
  border-radius:11px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#371452,#1d0c2b);
  border:1px solid #63308a;
}

.upcomingDateBox span{
  color:#bd78e8;
  font-size:8px;
  font-weight:900;
}

.upcomingDateBox strong{
  font-size:21px;
  line-height:22px;
}

.upcomingDate>div:nth-child(2){
  flex:1;
}

.upcomingDate>div:nth-child(2) b{
  display:block;
  font-size:12px;
}

.upcomingDate>div:nth-child(2) span{
  display:block;
  color:#7f7488;
  font-size:10px;
  margin-top:2px;
}

.availablePill{
  padding:6px 9px;
  border-radius:999px;
  background:#24102f;
  border:1px solid #613087;
  color:#cf83ff;
  font-size:9px;
  font-weight:900;
}

@media(max-width:900px){
  .availabilityStats{
    grid-template-columns:1fr 1fr;
  }

  .availabilityStat.wide{
    grid-column:1/-1;
  }

  .calendarToolbar,
  .availabilityHeader{
    align-items:flex-start;
    flex-direction:column;
  }

  .calendarDay{
    min-height:82px;
    padding:8px;
  }

  .dayStatus{
    display:none;
  }

  .upcomingGrid{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){
  .availabilityStats{
    grid-template-columns:1fr;
  }

  .availabilityStat.wide{
    grid-column:auto;
  }

  .availabilityLegend{
    gap:10px;
  }

  .availabilityCalendar{
    gap:3px;
    padding:6px;
  }

  .calendarWeek{
    padding:0 6px;
  }

  .calendarDay{
    min-height:58px;
    border-radius:8px;
    padding:6px;
  }

  .calendarDay.available:after,
  .calendarDay.unavailable:after{
    width:16px;
    height:16px;
    top:5px;
    right:5px;
    font-size:9px;
  }

  .dayNumber{
    font-size:12px;
  }

  .todayLabel{
    display:none;
  }

  .calendarHelp{
    align-items:flex-start;
    flex-direction:column;
  }

  .calendarActions{
    width:100%;
  }

  .calendarActions .btn{
    flex:1;
  }
}

/* =========================================================
   DANCEHIRES V4 INTRO VIDEO
   ========================================================= */

.introVideoCard{
  margin:18px 0;
  border:1px solid #45275b;
  border-radius:22px;
  padding:22px;
  background:
    radial-gradient(
      circle at 80% 0,
      rgba(140,43,211,.17),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #120b18,
      #0d0812
    );
  box-shadow:
    0 24px 70px
    rgba(0,0,0,.2);
}

.introVideoHeading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:16px;
}

.introVideoHeading h3{
  margin:4px 0 5px;
  font-size:24px;
}

.introVideoHeading p{
  margin:0;
  max-width:640px;
  color:#9d91a8;
  font-size:13px;
  line-height:1.6;
}

.introStatus{
  padding:7px 11px;
  border-radius:999px;
  background:#17101e;
  border:1px solid #3d2a48;
  color:#9b8aa8;
  font-size:9px;
  font-weight:900;
  letter-spacing:.8px;
  white-space:nowrap;
  text-transform:uppercase;
}

.introStatus.ready{
  color:#d597ff;
  border-color:#70339b;
  background:#24102f;
}

.introPrompt{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:15px;
  padding:13px 15px;
  border-radius:13px;
  border:1px solid #30203a;
  background:#110c16;
}

.introPrompt b{
  color:#dfb7ff;
  font-size:11px;
  white-space:nowrap;
}

.introPrompt span{
  color:#84778e;
  font-size:11px;
  line-height:1.5;
}

.introVideoStage{
  position:relative;
  min-height:390px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid #392247;
  background:
    radial-gradient(
      circle at 50% 40%,
      #28113a,
      #08060b 72%
    );
}

.introVideoPreview{
  display:block;
  width:100%;
  height:390px;
  object-fit:cover;
  background:#08060b;
}

.introCameraPlaceholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px;
  background:
    radial-gradient(
      circle,
      rgba(91,35,132,.17),
      transparent 65%
    );
}

.introCameraPlaceholder b{
  margin-top:11px;
  font-size:17px;
}

.introCameraPlaceholder span{
  max-width:420px;
  margin-top:5px;
  color:#817489;
  font-size:11px;
  line-height:1.5;
}

.introCameraIcon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#cd83ff;
  background:#241032;
  border:1px solid #67348b;
  font-size:18px;
  box-shadow:
    0 0 30px
    rgba(161,44,240,.18);
}

.introRecordingBadge{
  position:absolute;
  left:15px;
  top:15px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border-radius:8px;
  background:
    rgba(16,7,12,.8);
  color:#ff8aa4;
  font-size:10px;
  font-weight:900;
  backdrop-filter:blur(10px);
}

.introRecordingBadge span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ef456b;
  box-shadow:
    0 0 10px
    rgba(239,69,107,.9);
}

.introTimerDisplay{
  position:absolute;
  right:15px;
  bottom:15px;
  z-index:5;
  padding:7px 10px;
  border-radius:8px;
  background:
    rgba(9,5,13,.78);
  color:#ddd1e6;
  font-size:11px;
  font-weight:800;
  backdrop-filter:blur(10px);
}

.introRecorderMessage{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:10px 13px;
  margin-top:11px;
  border-radius:11px;
  border:1px solid #2d2035;
  background:#100b14;
  color:#91849b;
  font-size:11px;
}

.introRecorderMessage.ready{
  color:#d3a4ef;
  border-color:#4d2864;
}

.introRecorderMessage.recording{
  color:#ef89a1;
  border-color:#552132;
}

.introRecorderMessage.success{
  color:#c99df0;
  border-color:#59317b;
}

.introRecorderMessage.error{
  color:#f199ad;
  border-color:#5a2635;
}

.introRecorderMessage.uploading{
  color:#d5bcdf;
}

.introVideoActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.introPrivacy{
  display:flex;
  gap:10px;
  margin-top:16px;
  padding-top:15px;
  border-top:1px solid #2a1a33;
}

.introPrivacy b{
  color:#c5b3cf;
  font-size:10px;
}

.introPrivacy span{
  color:#716579;
  font-size:10px;
}

.introPublicCard{
  overflow:hidden;
}

.publicIntroVideo{
  display:block;
  width:100%;
  margin-top:13px;
  max-height:520px;
  border-radius:15px;
  border:1px solid #392347;
  background:#07050a;
}

@media(max-width:700px){
  .introVideoHeading{
    flex-direction:column;
  }

  .introVideoStage,
  .introVideoPreview{
    min-height:260px;
    height:260px;
  }

  .introPrompt{
    flex-direction:column;
  }

  .introVideoActions .btn{
    flex:1 1 45%;
  }

  .introPrivacy{
    flex-direction:column;
  }
}

/* ========================================================
   DANCEHIRES V4 HIRING CENTER
   ======================================================== */

.hiringKPIs,
.myApplicationsHeader{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:20px;
}

.hiringKPI{
  padding:18px;
  border:1px solid #382347;
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      #150d1c,
      #0d0911
    );
}

.hiringKPI span{
  display:block;
  color:#8f8199;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.hiringKPI b{
  display:block;
  margin-top:6px;
  font-size:30px;
  color:#fff;
}

.jobApplicantGroup{
  margin-bottom:28px;
}

.jobApplicantHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:12px;
  padding:18px 20px;
  border:1px solid #382347;
  border-radius:17px;
  background:#110b16;
}

.jobApplicantHeader h3{
  margin:4px 0;
  font-size:20px;
}

.jobApplicantHeader p{
  margin:0;
  color:#83768d;
  font-size:11px;
}

.jobHeaderActions{
  display:flex;
  align-items:center;
  gap:8px;
}

.jobStatusPill{
  padding:7px 10px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.4px;
}

.jobStatusPill.open{
  color:#8de6b0;
  border:1px solid #275a3c;
  background:#0f2519;
}

.jobStatusPill.closed{
  color:#c2b5c8;
  border:1px solid #403247;
  background:#18121d;
}

.applicantCards{
  display:grid;
  gap:15px;
}

.applicantCard,
.myApplicationCard{
  border:1px solid #412652;
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 85% 0,
      rgba(126,33,190,.11),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #130c18,
      #0c0810
    );
}

.applicantTop{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:20px;
}

.applicantIdentity{
  display:flex;
  align-items:center;
  gap:16px;
}

.applicantPhoto{
  width:86px;
  height:86px;
  border-radius:18px;
  object-fit:cover;
  border:1px solid #6d368f;
  background:#150c1c;
}

.appAppliedFor,
.appMiniLabel{
  color:#b867ef;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}

.applicantIdentity h3{
  margin:4px 0;
  font-size:22px;
}

.applicantHeadline{
  margin:0;
  color:#c5b8cc;
  font-size:12px;
}

.applicantMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:7px;
  color:#8d8096;
  font-size:10px;
}

.applicantStatusArea{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
}

.applicantStatusArea small{
  color:#776b80;
  font-size:9px;
}

.appStatus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
  border:1px solid #463151;
  background:#191020;
  color:#c6b8cc;
}

.appStatus-under-review{
  color:#c898f1;
  border-color:#623e7f;
  background:#25132f;
}

.appStatus-shortlisted{
  color:#d49cff;
  border-color:#73359e;
  background:#2a1239;
  box-shadow:0 0 18px rgba(156,55,220,.12);
}

.appStatus-offered{
  color:#f0b5df;
  border-color:#733d67;
  background:#291421;
}

.appStatus-hired{
  color:#8de7b0;
  border-color:#2d7047;
  background:#10281a;
}

.appStatus-declined{
  color:#ed95aa;
  border-color:#6b3040;
  background:#271017;
}

.jobAppliedCard{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin:0 20px 18px;
  overflow:hidden;
  border:1px solid #2e1d38;
  border-radius:13px;
  background:#2e1d38;
}

.jobAppliedCard>div{
  padding:12px;
  background:#100b14;
}

.jobAppliedCard span{
  display:block;
  color:#786b80;
  font-size:8px;
  font-weight:900;
  letter-spacing:.8px;
}

.jobAppliedCard b{
  display:block;
  margin-top:4px;
  color:#ddd3e3;
  font-size:10px;
}

.appIntroVideo{
  margin:0 20px 18px;
  padding:14px;
  border:1px solid #382147;
  border-radius:16px;
  background:#0c080f;
}

.appSectionHeading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:11px;
}

.appSectionHeading span{
  color:#a451d5;
  font-size:8px;
  font-weight:900;
  letter-spacing:1px;
}

.appSectionHeading h4{
  margin:4px 0 0;
  font-size:15px;
}

.videoReadyDot{
  color:#c481ef;
  font-size:8px;
  font-weight:900;
}

.appIntroVideo video{
  display:block;
  width:100%;
  max-height:390px;
  border-radius:12px;
  background:#050407;
}

.appNoVideo{
  margin:0 20px 18px;
  padding:14px;
  border:1px dashed #382a40;
  border-radius:14px;
}

.appNoVideo b{
  display:block;
  color:#bcaec3;
  font-size:11px;
}

.appNoVideo span{
  display:block;
  margin-top:3px;
  color:#766b7c;
  font-size:9px;
}

.applicantDetailGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:0 20px 18px;
}

.appMiniPanel{
  min-height:130px;
  padding:14px;
  border:1px solid #302039;
  border-radius:14px;
  background:#100b14;
}

.appMiniPanel>b{
  display:block;
  margin-top:6px;
  color:#e1d7e6;
  font-size:11px;
}

.appMiniPanel p{
  color:#786e7f;
  font-size:9px;
  line-height:1.5;
}

.availabilityPills{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:8px;
}

.availabilityPill{
  padding:4px 6px;
  border-radius:999px;
  font-size:7px;
  font-weight:800;
}

.availabilityPill.good{
  color:#85deb0;
  background:#10241a;
  border:1px solid #27543b;
}

.availabilityPill.bad{
  color:#eb8fa6;
  background:#271119;
  border:1px solid #65303d;
}

.reviewSummary{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:7px;
}

.reviewSummary b{
  color:#d59bff;
  font-size:17px;
}

.reviewSummary span{
  color:#746a7b;
  font-size:9px;
}

.appReviewList{
  margin-top:8px;
}

.appReview{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid #291b31;
}

.appReview b{
  display:block;
  color:#bd71e8;
  font-size:9px;
}

.appReview span{
  display:block;
  margin-top:2px;
  color:#84788b;
  font-size:8px;
}

.savedApplicantNotes{
  max-height:85px;
  overflow:auto;
  margin:6px 0;
}

.savedApplicantNote{
  margin-bottom:5px;
  padding:6px 8px;
  border-radius:7px;
  background:#17101d;
  color:#a99caf;
  font-size:8px;
}

.appNoteInput{
  width:100%;
  min-height:58px;
  margin:7px 0;
  resize:vertical;
  padding:8px;
  border:1px solid #382347;
  border-radius:9px;
  background:#0c0810;
  color:#fff;
  font:inherit;
  font-size:9px;
}

.applicantActions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:15px 20px;
  border-top:1px solid #2d1d36;
  background:#0d0911;
}

.shortlistBtn{
  border-color:#61317c!important;
}

.offerBtn{
  border-color:#653652!important;
}

.declineBtn{
  color:#d78b9e!important;
  border-color:#542b36!important;
}

.hireApplicantBtn{
  margin-left:auto;
}

.hiredConfirmation{
  margin-left:auto;
  padding:9px 14px;
  border-radius:10px;
  background:#112b1c;
  border:1px solid #2d7248;
  color:#8fe6b2;
  font-size:10px;
  font-weight:900;
}

.myApplicationList{
  display:grid;
  gap:14px;
}

.myAppHeader{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:20px;
}

.myAppHeader h3{
  margin:4px 0;
  font-size:20px;
}

.applicationTimeline{
  display:flex;
  gap:0;
  padding:15px 20px;
  border-top:1px solid #2c1c35;
  border-bottom:1px solid #2c1c35;
  overflow:auto;
}

.timelineStep{
  position:relative;
  min-width:130px;
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.timelineStep:not(:last-child):after{
  content:"";
  position:absolute;
  top:7px;
  left:15px;
  right:-3px;
  height:1px;
  background:#4a285d;
}

.timelineDot{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:14px;
  height:14px;
  border-radius:50%;
  border:3px solid #24142d;
  background:#a23fe3;
  box-shadow:0 0 10px rgba(162,63,227,.35);
}

.timelineStep b,
.timelineStep span{
  position:relative;
  z-index:2;
  display:block;
  padding-right:7px;
  background:#0f0a13;
}

.timelineStep b{
  color:#d5c8db;
  font-size:9px;
}

.timelineStep span{
  margin-top:2px;
  color:#716678;
  font-size:7px;
}

.myAppFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
}

.myAppFooter span{
  color:#786c80;
  font-size:9px;
}

.emptyHiringState{
  padding:55px 20px;
  text-align:center;
  border:1px solid #33213d;
  border-radius:18px;
  background:#100b14;
}

.emptyHiringState h3{
  margin:0;
  font-size:20px;
}

.emptyHiringState p{
  max-width:480px;
  margin:8px auto 15px;
  color:#83768b;
  font-size:11px;
  line-height:1.6;
}

@media(max-width:1000px){
  .hiringKPIs,
  .myApplicationsHeader{
    grid-template-columns:repeat(2,1fr);
  }

  .applicantDetailGrid{
    grid-template-columns:1fr;
  }

  .jobAppliedCard{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:700px){
  .applicantTop,
  .jobApplicantHeader,
  .myAppHeader{
    flex-direction:column;
  }

  .applicantIdentity{
    align-items:flex-start;
  }

  .applicantStatusArea{
    align-items:flex-start;
  }

  .jobHeaderActions{
    flex-wrap:wrap;
  }

  .hiringKPIs,
  .myApplicationsHeader,
  .jobAppliedCard{
    grid-template-columns:1fr;
  }

  .hireApplicantBtn,
  .hiredConfirmation{
    margin-left:0;
  }

  .applicantActions .btn{
    flex:1 1 45%;
  }
}

/* ========================================================
   DANCEHIRES V4 COMPACT APPLICATIONS + VIDEO MODAL
   ======================================================== */

.compactVideoRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 20px 18px;
  padding:13px 15px;
  border:1px solid #352140;
  border-radius:13px;
  background:#0f0a13;
}

.compactVideoRow b{
  display:block;
  margin-top:4px;
  color:#ddd3e3;
  font-size:11px;
}

.compactVideoRow.noVideo{
  opacity:.72;
}

.videoWatchBtn{
  border-color:#67338a!important;
  color:#dca8ff!important;
}

.availabilityState{
  display:inline-flex;
  margin-top:9px;
  padding:5px 8px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.availabilityState.good{
  color:#8ce7b1;
  border:1px solid #2d6d47;
  background:#10271a;
}

.availabilityState.bad{
  color:#ef95aa;
  border:1px solid #6a3040;
  background:#271017;
}

.availabilityState.neutral{
  color:#b3a6bb;
  border:1px solid #43344b;
  background:#19131e;
}

body.modalOpen{
  overflow:hidden;
}

.introApplicantModal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}

.introApplicantBackdrop{
  position:absolute;
  inset:0;
  background:rgba(4,2,7,.86);
  backdrop-filter:blur(12px);
}

.introApplicantDialog{
  position:relative;
  z-index:2;
  width:min(1080px,96vw);
  max-height:92vh;
  overflow:auto;
  border:1px solid #55306b;
  border-radius:24px;
  background:
    radial-gradient(
      circle at 80% 0,
      rgba(151,47,218,.17),
      transparent 34%
    ),
    #0b0710;
  box-shadow:
    0 35px 100px rgba(0,0,0,.55),
    0 0 60px rgba(137,40,202,.12);
}

.introApplicantHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-bottom:1px solid #2d1c36;
}

.introApplicantIdentity{
  display:flex;
  align-items:center;
  gap:14px;
}

.introApplicantAvatar{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:15px;
  border:1px solid #713b92;
}

.introApplicantHeader h2{
  margin:3px 0;
  font-size:22px;
}

.introApplicantHeader p{
  margin:0;
  color:#8e8197;
  font-size:10px;
}

.introModalClose{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid #402a4c;
  background:#120c17;
  color:#fff;
  font-size:25px;
  cursor:pointer;
}

.introApplicantVideoWrap{
  padding:18px 20px 0;
}

.introApplicantVideo{
  display:block;
  width:100%;
  max-height:58vh;
  border-radius:17px;
  border:1px solid #382245;
  background:#030205;
}

.introApplicantInfoBar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin:16px 20px;
  overflow:hidden;
  border:1px solid #2f1e39;
  border-radius:13px;
  background:#2f1e39;
}

.introApplicantInfoBar>div{
  padding:11px 12px;
  background:#100b14;
}

.introApplicantInfoBar span{
  display:block;
  color:#756a7d;
  font-size:8px;
  font-weight:900;
  letter-spacing:.7px;
}

.introApplicantInfoBar b{
  display:block;
  margin-top:4px;
  color:#ddd3e3;
  font-size:10px;
}

.introApplicantFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 20px 20px;
}

.introViewerNav,
.introViewerActions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.introViewerNav span{
  color:#8c7f95;
  font-size:9px;
}

@media(max-width:800px){
  .introApplicantModal{
    padding:10px;
  }

  .introApplicantInfoBar{
    grid-template-columns:repeat(2,1fr);
  }

  .introApplicantFooter{
    align-items:flex-start;
    flex-direction:column;
  }

  .compactVideoRow{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   DANCEHIRES V4 APPLICATIONS COMPACT V2
   ========================================================= */

.applicantDetailGrid{
  display:grid!important;
  grid-template-columns:
    minmax(0,1.15fr)
    minmax(0,.8fr)
    minmax(0,1fr)!important;
  gap:8px!important;
  margin:0 20px 12px!important;
}

.compactHiringInfo{
  position:relative;
  min-height:72px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid #302039;
  border-radius:12px;
  background:#100b14;
}

.compactHiringIcon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid #4e2963;
  background:#1a0d24;
  color:#c36ff4;
  font-size:14px;
  font-weight:900;
}

.compactHiringCopy{
  min-width:0;
  flex:1;
}

.compactHiringCopy span{
  display:block;
  color:#a953d8;
  font-size:7px;
  font-weight:900;
  letter-spacing:.8px;
}

.compactHiringCopy b{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:#e1d7e6;
  font-size:10px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.compactHiringCopy small{
  display:block;
  margin-top:2px;
  color:#716578;
  font-size:7px;
}

.compactState{
  flex:0 0 auto;
  padding:5px 7px;
  border-radius:999px;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
}

.compactState.good{
  color:#8ce7b1;
  border:1px solid #2e6e47;
  background:#10271a;
}

.compactState.bad{
  color:#ef95aa;
  border:1px solid #6c3041;
  background:#271017;
}

.compactState.neutral{
  color:#b8aabe;
  border:1px solid #43354a;
  background:#19131e;
}

.compactNoteButton{
  flex:0 0 auto;
  padding:7px 8px!important;
  font-size:8px!important;
}

.appNoteDrawer{
  grid-column:1 / -1;
  margin-top:0;
  padding:11px;
  border:1px solid #3b2547;
  border-radius:12px;
  background:#0e0912;
}

.appNoteHistory{
  display:grid;
  gap:5px;
  margin-bottom:8px;
}

.appNoteDrawerActions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
}

.appNoteDrawer .appNoteInput{
  min-height:64px;
  margin:0 0 8px;
}

.applicantCard{
  border-radius:17px!important;
}

.applicantTop{
  padding:16px 18px!important;
}

.applicantPhoto{
  width:70px!important;
  height:70px!important;
  border-radius:15px!important;
}

.applicantIdentity h3{
  font-size:18px!important;
}

.jobAppliedCard{
  margin:
    0 18px 11px!important;
}

.compactVideoRow{
  margin:
    0 18px 11px!important;
  padding:
    10px 12px!important;
}

.applicantActions{
  padding:
    11px 18px!important;
}

.introApplicantDialog{
  width:min(
    1120px,
    96vw
  )!important;
}

.introApplicantVideo{
  max-height:53vh!important;
}

.modalAvailability.good{
  color:#82e4aa;
}

.modalAvailability.bad{
  color:#ec8ca3;
}

.modalAvailability.neutral{
  color:#c4b5ca;
}

.introModalNote{
  display:grid;
  grid-template-columns:
    auto
    minmax(250px,1fr)
    auto;
  gap:10px;
  align-items:center;
  margin:0 20px 3px;
  padding:10px;
  border:1px solid #302039;
  border-radius:12px;
  background:#0f0a13;
}

.introModalNote span{
  display:block;
}

.introModalNote small{
  display:block;
  margin-top:2px;
  color:#716578;
  font-size:7px;
}

.introModalNote textarea{
  min-height:42px;
  max-height:80px;
  resize:vertical;
  padding:8px 10px;
  border:1px solid #392347;
  border-radius:9px;
  background:#08060b;
  color:#fff;
  font:inherit;
  font-size:9px;
}

.introKeyboardHint{
  padding:
    0 20px 15px;
  color:#675c6d;
  font-size:7px;
  text-align:center;
  letter-spacing:.2px;
}

.introViewerActions{
  justify-content:flex-end;
}

@media(max-width:950px){
  .applicantDetailGrid{
    grid-template-columns:1fr!important;
  }

  .introModalNote{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){
  .compactHiringInfo{
    align-items:flex-start;
  }

  .compactState{
    position:absolute;
    right:9px;
    top:9px;
  }

  .introApplicantVideo{
    max-height:45vh!important;
  }
}




/* =========================================================
   DANCEHIRES V4 APPLICATIONS COMPACT V2
   ========================================================= */

.applicantDetailGrid{
  display:grid!important;
  grid-template-columns:
    minmax(0,1.15fr)
    minmax(0,.8fr)
    minmax(0,1fr)!important;
  gap:8px!important;
  margin:0 20px 12px!important;
}

.compactHiringInfo{
  position:relative;
  min-height:72px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid #302039;
  border-radius:12px;
  background:#100b14;
}

.compactHiringIcon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid #4e2963;
  background:#1a0d24;
  color:#c36ff4;
  font-size:14px;
  font-weight:900;
}

.compactHiringCopy{
  min-width:0;
  flex:1;
}

.compactHiringCopy span{
  display:block;
  color:#a953d8;
  font-size:7px;
  font-weight:900;
  letter-spacing:.8px;
}

.compactHiringCopy b{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:#e1d7e6;
  font-size:10px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.compactHiringCopy small{
  display:block;
  margin-top:2px;
  color:#716578;
  font-size:7px;
}

.compactState{
  flex:0 0 auto;
  padding:5px 7px;
  border-radius:999px;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
}

.compactState.good{
  color:#8ce7b1;
  border:1px solid #2e6e47;
  background:#10271a;
}

.compactState.bad{
  color:#ef95aa;
  border:1px solid #6c3041;
  background:#271017;
}

.compactState.neutral{
  color:#b8aabe;
  border:1px solid #43354a;
  background:#19131e;
}

.compactNoteButton{
  flex:0 0 auto;
  padding:7px 8px!important;
  font-size:8px!important;
}

.appNoteDrawer{
  grid-column:1 / -1;
  margin-top:0;
  padding:11px;
  border:1px solid #3b2547;
  border-radius:12px;
  background:#0e0912;
}

.appNoteHistory{
  display:grid;
  gap:5px;
  margin-bottom:8px;
}

.appNoteDrawerActions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
}

.appNoteDrawer .appNoteInput{
  min-height:64px;
  margin:0 0 8px;
}

.applicantCard{
  border-radius:17px!important;
}

.applicantTop{
  padding:16px 18px!important;
}

.applicantPhoto{
  width:70px!important;
  height:70px!important;
  border-radius:15px!important;
}

.applicantIdentity h3{
  font-size:18px!important;
}

.jobAppliedCard{
  margin:
    0 18px 11px!important;
}

.compactVideoRow{
  margin:
    0 18px 11px!important;
  padding:
    10px 12px!important;
}

.applicantActions{
  padding:
    11px 18px!important;
}

.introApplicantDialog{
  width:min(
    1120px,
    96vw
  )!important;
}

.introApplicantVideo{
  max-height:53vh!important;
}

.modalAvailability.good{
  color:#82e4aa;
}

.modalAvailability.bad{
  color:#ec8ca3;
}

.modalAvailability.neutral{
  color:#c4b5ca;
}

.introModalNote{
  display:grid;
  grid-template-columns:
    auto
    minmax(250px,1fr)
    auto;
  gap:10px;
  align-items:center;
  margin:0 20px 3px;
  padding:10px;
  border:1px solid #302039;
  border-radius:12px;
  background:#0f0a13;
}

.introModalNote span{
  display:block;
}

.introModalNote small{
  display:block;
  margin-top:2px;
  color:#716578;
  font-size:7px;
}

.introModalNote textarea{
  min-height:42px;
  max-height:80px;
  resize:vertical;
  padding:8px 10px;
  border:1px solid #392347;
  border-radius:9px;
  background:#08060b;
  color:#fff;
  font:inherit;
  font-size:9px;
}

.introKeyboardHint{
  padding:
    0 20px 15px;
  color:#675c6d;
  font-size:7px;
  text-align:center;
  letter-spacing:.2px;
}

.introViewerActions{
  justify-content:flex-end;
}

@media(max-width:950px){
  .applicantDetailGrid{
    grid-template-columns:1fr!important;
  }

  .introModalNote{
    grid-template-columns:1fr;
  }
}

@media(max-width:650px){
  .compactHiringInfo{
    align-items:flex-start;
  }

  .compactState{
    position:absolute;
    right:9px;
    top:9px;
  }

  .introApplicantVideo{
    max-height:45vh!important;
  }
}




/* =========================================================
   DANCEHIRES V4
   OFFER ACCEPTED + HIRING CELEBRATION
   ========================================================= */


.dhOfferAcceptedCard{
  border-color:#1d9b55!important;
  box-shadow:
    0 0 0 1px rgba(46,220,112,.12),
    0 0 32px rgba(39,208,105,.09)!important;
}


.dhOfferAcceptedStatus{
  padding:6px 11px!important;
  border:1px solid #239756!important;
  border-radius:999px!important;
  background:
    rgba(18,72,40,.8)!important;
  color:#74efaa!important;
  box-shadow:
    0 0 18px rgba(43,221,111,.18);
}


.dhOfferAcceptedHero{
  display:flex;
  align-items:center;
  gap:15px;

  margin:
    0 18px 12px;

  padding:
    13px 16px;

  border:
    1px solid #269958;

  border-radius:
    14px;

  background:
    radial-gradient(
      circle at 30% 50%,
      rgba(44,226,115,.18),
      transparent 48%
    ),
    linear-gradient(
      90deg,
      rgba(10,46,28,.92),
      rgba(10,21,17,.92)
    );

  box-shadow:
    inset 0 0 25px
    rgba(50,224,116,.05),
    0 0 22px
    rgba(34,205,100,.07);
}


.dhAcceptedCheck{
  flex:0 0 auto;

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    2px solid #35df78;

  border-radius:50%;

  background:
    rgba(28,105,57,.55);

  color:#7bffae;

  font-size:24px;
  font-weight:900;

  box-shadow:
    0 0 22px
    rgba(47,221,115,.24);
}


.dhAcceptedText{
  min-width:0;
}


.dhAcceptedText span{
  display:block;

  color:#65dd98;

  font-size:7px;
  font-weight:900;

  letter-spacing:
    1.2px;
}


.dhAcceptedText strong{
  display:block;

  margin-top:2px;

  color:#8affb7;

  font-size:19px;

  letter-spacing:
    .3px;
}


.dhAcceptedText small{
  display:block;

  margin-top:3px;

  color:#9db5a5;

  font-size:9px;
}


/* CONFETTI */


.dhConfettiLayer{
  position:fixed;
  inset:0;

  z-index:100001;

  overflow:hidden;

  pointer-events:none;
}


.dhConfettiPiece{
  --drift:0px;
  --spin:720deg;

  position:absolute;

  top:-30px;

  width:9px;
  height:15px;

  border-radius:2px;

  background:#9c2cff;

  opacity:.95;

  animation:
    dhConfettiFall
    3.2s
    cubic-bezier(.19,.74,.43,1)
    forwards;
}


.dhConfettiPiece[data-tone="1"]{
  background:#ffc13d;
}


.dhConfettiPiece[data-tone="2"]{
  background:#ec4e92;
}


.dhConfettiPiece[data-tone="3"]{
  background:#45dca0;
}


.dhConfettiPiece[data-tone="4"]{
  background:#ef7653;
}


@keyframes dhConfettiFall{

  0%{
    transform:
      translate3d(
        0,
        -20px,
        0
      )
      rotate(0deg);

    opacity:0;
  }

  8%{
    opacity:1;
  }

  100%{
    transform:
      translate3d(
        var(--drift),
        110vh,
        0
      )
      rotate(
        var(--spin)
      );

    opacity:.9;
  }

}


/* CELEBRATION MODAL */


body.dhCelebrating{
  overflow:hidden;
}


.dhHiringCelebration{
  position:fixed;
  inset:0;

  z-index:100000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;
}


.dhCelebrationBackdrop{
  position:absolute;
  inset:0;

  background:
    rgba(3,2,6,.88);

  backdrop-filter:
    blur(12px);
}


.dhCelebrationDialog{
  position:relative;

  z-index:2;

  width:min(
    520px,
    94vw
  );

  padding:
    38px 34px 30px;

  overflow:hidden;

  border:
    1px solid #9c6a17;

  border-radius:
    25px;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(255,188,42,.20),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 30%,
      rgba(152,39,239,.15),
      transparent 40%
    ),
    #0b0810;

  box-shadow:
    0 35px 110px
    rgba(0,0,0,.65),
    0 0 55px
    rgba(255,182,35,.12);

  text-align:center;

  animation:
    dhCelebrationIn
    .34s
    ease-out;
}


@keyframes dhCelebrationIn{

  from{
    opacity:0;

    transform:
      translateY(20px)
      scale(.94);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }

}


.dhCelebrationClose{
  position:absolute;

  top:15px;
  right:15px;

  width:38px;
  height:38px;

  border:
    1px solid #423147;

  border-radius:
    11px;

  background:#100b14;

  color:#fff;

  font-size:23px;

  cursor:pointer;
}


.dhCelebrationIcon{
  width:78px;
  height:78px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:
    0 auto 17px;

  border:
    2px solid #35dc76;

  border-radius:50%;

  background:
    rgba(25,94,51,.55);

  color:#79ffab;

  font-size:42px;
  font-weight:900;

  box-shadow:
    0 0 35px
    rgba(44,220,111,.22);
}


.dhCelebrationEyebrow{
  color:#d89f35;

  font-size:9px;
  font-weight:900;

  letter-spacing:
    1.5px;
}


.dhCelebrationDialog h1{
  margin:
    7px 0 8px;

  color:#ffc447;

  font-size:
    clamp(
      34px,
      6vw,
      48px
    );

  line-height:1;
}


.dhCelebrationLead{
  margin:
    17px 0 5px;

  color:#c9bdcd;

  font-size:13px;
}


.dhCelebrationName{
  color:#fff;

  font-size:
    clamp(
      27px,
      5vw,
      37px
    );

  font-weight:900;
}


.dhCelebrationSuccess{
  display:flex;
  align-items:center;

  gap:13px;

  margin:
    25px 0 22px;

  padding:
    15px;

  border:
    1px solid #426c38;

  border-radius:
    15px;

  background:
    rgba(18,50,29,.55);

  text-align:left;
}


.dhCelebrationMiniCheck{
  flex:0 0 auto;

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#154d29;

  color:#79f5a5;

  font-size:23px;
  font-weight:900;
}


.dhCelebrationSuccess strong{
  display:block;

  color:#79f5a5;

  font-size:18px;
}


.dhCelebrationSuccess span{
  display:block;

  margin-top:3px;

  color:#a9b4ac;

  font-size:9px;
}


.dhViewTeamButton{
  width:100%;

  min-height:48px;

  font-size:13px!important;
}


.dhStayButton{
  margin-top:13px;

  border:0;

  background:transparent;

  color:#877b8c;

  font-size:9px;

  cursor:pointer;
}


.dhStayButton:hover{
  color:#fff;
}


@media(max-width:650px){

  .dhOfferAcceptedHero{
    margin:
      0 10px 10px;

    padding:
      11px;
  }

  .dhAcceptedText strong{
    font-size:15px;
  }

  .dhHiringCelebration{
    padding:12px;
  }

  .dhCelebrationDialog{
    padding:
      33px 20px 24px;
  }

}




/* =========================================================
   DANCEHIRES V4 HIRED TEAM WOW
   ========================================================= */

.hiredTeamPage{
  width:100%;
}

.hiredTeamHeader{
  align-items:flex-end;
}

.hiredTeamEyebrow{
  margin-bottom:5px;
  color:#b044ef;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.3px;
}

.hiredTeamCount{
  min-width:120px;
  padding:12px 16px;
  border:1px solid #382243;
  border-radius:14px;
  background:#100b14;
  text-align:center;
}

.hiredTeamCount span{
  display:block;
  color:#806c89;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
}

.hiredTeamCount b{
  display:block;
  margin-top:3px;
  color:#fff;
  font-size:28px;
}

.hiredTeamGrid{
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(430px,1fr)
    );
  gap:18px;
}

.hiredTeamCard{
  position:relative;
  overflow:hidden;
  border:1px solid #382243;
  border-radius:20px;
  background:
    linear-gradient(
      145deg,
      rgba(24,13,31,.98),
      rgba(10,7,14,.98)
    );
  box-shadow:
    0 18px 50px rgba(0,0,0,.22);
}

.hiredTeamCardGlow{
  position:absolute;
  top:-90px;
  right:-70px;
  width:230px;
  height:230px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(150,39,239,.16),
      transparent 67%
    );
  pointer-events:none;
}

.hiredTeamCardTop{
  position:relative;
  display:flex;
  align-items:center;
  gap:15px;
  padding:20px;
}

.hiredTeamPhoto{
  width:86px;
  height:86px;
  flex:0 0 auto;
  border:1px solid #67348a;
  border-radius:18px;
  object-fit:cover;
  background:#150d1c;
  box-shadow:
    0 0 25px rgba(147,42,225,.12);
}

.hiredTeamIdentity{
  min-width:0;
  flex:1;
}

.hiredTeamIdentity h3{
  margin:4px 0 2px;
  color:#fff;
  font-size:21px;
}

.hiredTeamIdentity p{
  margin:0;
  color:#b5a7bb;
  font-size:10px;
}

.hiredTeamStatus{
  display:flex;
  align-items:center;
  gap:6px;
  color:#64e49d;
  font-size:7px;
  font-weight:900;
  letter-spacing:1px;
}

.hiredTeamStatus span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#54e28f;
  box-shadow:
    0 0 12px rgba(75,224,141,.65);
}

.hiredTeamActiveBadge{
  align-self:flex-start;
  padding:6px 9px;
  border:1px solid #287444;
  border-radius:999px;
  background:#0e2819;
  color:#69e49a;
  font-size:7px;
  font-weight:900;
}

.hiredTeamAssignment{
  display:grid;
  grid-template-columns:
    repeat(4,1fr);
  border-top:1px solid #2b1d32;
  border-bottom:1px solid #2b1d32;
  background:#0d0911;
}

.hiredTeamAssignment>div{
  min-width:0;
  padding:12px 14px;
  border-right:1px solid #2b1d32;
}

.hiredTeamAssignment>div:last-child{
  border-right:0;
}

.hiredTeamAssignment span,
.hiredTeamMeta span{
  display:block;
  color:#7e6988;
  font-size:7px;
  font-weight:900;
  letter-spacing:.9px;
}

.hiredTeamAssignment b{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:#e3d9e7;
  font-size:9px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.hiredTeamMeta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:15px 20px 4px;
}

.hiredTeamMeta>div{
  padding:12px;
  border:1px solid #2e2035;
  border-radius:12px;
  background:#100b14;
}

.hiredTeamMeta strong{
  display:block;
  margin-top:4px;
  color:#fff;
  font-size:11px;
}

.hiredTeamMeta .teamConfirmed{
  color:#6fe49f;
}

.hiredTeamActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:14px 20px 20px;
}

.hiredTeamActions .btn{
  min-width:120px;
}

.hiredTeamEmpty{
  max-width:620px;
  margin:35px auto;
  padding:55px 30px;
  border:1px solid #35223f;
  border-radius:20px;
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(139,37,223,.12),
      transparent 45%
    ),
    #0f0a13;
  text-align:center;
}

.hiredTeamEmptyIcon{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 15px;
  border:1px solid #67348a;
  border-radius:18px;
  background:#1d0d29;
  color:#bd55f4;
  font-size:34px;
}

.hiredTeamEmpty h3{
  margin:0;
  color:#fff;
  font-size:22px;
}

.hiredTeamEmpty p{
  margin:7px 0 20px;
  color:#8e8194;
}

@media(max-width:900px){

  .hiredTeamGrid{
    grid-template-columns:1fr;
  }

  .hiredTeamAssignment{
    grid-template-columns:1fr 1fr;
  }

  .hiredTeamAssignment>div:nth-child(2){
    border-right:0;
  }

  .hiredTeamAssignment>div:nth-child(-n+2){
    border-bottom:1px solid #2b1d32;
  }

}

@media(max-width:600px){

  .hiredTeamCardTop{
    align-items:flex-start;
  }

  .hiredTeamPhoto{
    width:70px;
    height:70px;
  }

  .hiredTeamAssignment{
    grid-template-columns:1fr;
  }

  .hiredTeamAssignment>div{
    border-right:0;
    border-bottom:1px solid #2b1d32;
  }

  .hiredTeamAssignment>div:last-child{
    border-bottom:0;
  }

  .hiredTeamMeta{
    grid-template-columns:1fr;
  }

  .hiredTeamActions{
    display:grid;
  }

  .hiredTeamActions .btn{
    width:100%;
  }

}




/* =========================================================
   DANCEHIRES V4
   PROFESSIONAL HIRED EXPERIENCE
   ========================================================= */


.dhProfessionalHiredCard{
  border-color:
    rgba(51,204,112,.38)!important;

  box-shadow:
    0 0 0 1px
    rgba(48,216,116,.05),
    0 18px 55px
    rgba(0,0,0,.24)!important;
}


.dhYouAreHired{
  display:flex;
  align-items:center;

  gap:18px;

  margin:
    14px;

  padding:
    18px 20px;

  border:
    1px solid #2b9d5a;

  border-radius:
    16px;

  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(49,222,113,.18),
      transparent 32%
    ),
    linear-gradient(
      100deg,
      rgba(8,54,28,.94),
      rgba(11,17,14,.96)
    );

  box-shadow:
    0 0 30px
    rgba(44,207,105,.09);
}


.dhHiredBurst{
  width:58px;
  height:58px;

  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    2px solid #55e992;

  border-radius:50%;

  background:
    rgba(24,112,57,.55);

  color:#89ffb7;

  font-size:31px;
  font-weight:900;

  box-shadow:
    0 0 30px
    rgba(55,226,117,.25);
}


.dhHiredCopy span{
  display:block;

  color:#5dde91;

  font-size:8px;
  font-weight:900;

  letter-spacing:
    1.25px;
}


.dhHiredCopy strong{
  display:block;

  margin-top:2px;

  color:#85ffb5;

  font-size:27px;
  line-height:1.1;
}


.dhHiredCopy small{
  display:block;

  margin-top:5px;

  color:#a8b7ad;

  font-size:10px;
}


/* UPCOMING JOBS */


.dhMyHiresSection{
  margin-top:25px;
}


.dhMyHiresHeading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:14px;
}


.dhMyHiresHeading>div:first-child>span{
  display:block;

  margin-bottom:4px;

  color:#b245f1;

  font-size:8px;
  font-weight:900;

  letter-spacing:
    1.2px;
}


.dhMyHiresHeading h2{
  margin:0;

  color:#fff;

  font-size:28px;
}


.dhMyHiresHeading p{
  margin:
    5px 0 0;

  color:#92869a;

  font-size:11px;
}


.dhMyHiresTotal{
  min-width:58px;

  padding:
    10px 16px;

  border:
    1px solid #452752;

  border-radius:
    14px;

  background:#110b15;

  color:#fff;

  font-size:26px;
  font-weight:900;

  text-align:center;
}


.dhMyHiresGrid{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(430px,1fr)
    );

  gap:16px;
}


.dhMyHireCard{
  position:relative;

  overflow:hidden;

  border:
    1px solid #392344;

  border-radius:
    18px;

  background:
    radial-gradient(
      circle at 0 0,
      rgba(144,38,225,.10),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #120b17,
      #0a080d
    );

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.22);
}


.dhMyHireTop{
  display:flex;
  align-items:center;

  gap:14px;

  padding:
    18px;
}


.dhMyHireCheck{
  width:48px;
  height:48px;

  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid #2e9b59;

  border-radius:
    14px;

  background:
    rgba(20,92,47,.45);

  color:#73eda2;

  font-size:24px;
  font-weight:900;
}


.dhMyHireTitle{
  flex:1;
  min-width:0;
}


.dhMyHireTitle>span{
  display:block;

  color:#62df94;

  font-size:7px;
  font-weight:900;

  letter-spacing:
    1px;
}


.dhMyHireTitle h3{
  margin:
    3px 0;

  color:#fff;

  font-size:18px;
}


.dhMyHireTitle p{
  margin:0;

  color:#9c8fa2;

  font-size:9px;
}


.dhConfirmedBadge{
  align-self:flex-start;

  padding:
    6px 9px;

  border:
    1px solid #287447;

  border-radius:
    999px;

  background:
    rgba(12,54,29,.72);

  color:#66e497;

  font-size:7px;
  font-weight:900;
}


.dhMyHireDetails{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid #2a1b31;

  border-bottom:
    1px solid #2a1b31;

  background:#0c090f;
}


.dhMyHireDetails>div{
  min-width:0;

  padding:
    12px 13px;

  border-right:
    1px solid #2a1b31;
}


.dhMyHireDetails>div:last-child{
  border-right:0;
}


.dhMyHireDetails span{
  display:block;

  color:#796782;

  font-size:7px;
  font-weight:900;

  letter-spacing:
    .8px;
}


.dhMyHireDetails b{
  display:block;

  margin-top:4px;

  overflow:hidden;

  color:#e7dfe9;

  font-size:9px;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.dhMyHireFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:
    14px 18px;
}


.dhReadyForEvent{
  display:flex;
  align-items:center;

  gap:7px;

  color:#8c9b91;

  font-size:9px;
}


.dhReadyForEvent i{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#54df8e;

  box-shadow:
    0 0 10px
    rgba(80,224,143,.55);
}


.dhNoUpcomingJobs{
  display:flex;
  align-items:center;

  gap:14px;

  padding:
    22px;

  border:
    1px solid #33203b;

  border-radius:
    16px;

  background:#0f0a13;
}


.dhNoUpcomingIcon{
  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid #633783;

  border-radius:
    14px;

  background:#1a0d24;

  color:#b149e8;

  font-size:27px;
}


.dhNoUpcomingJobs strong{
  color:#fff;
}


.dhNoUpcomingJobs p{
  margin:
    4px 0 0;

  color:#887c8d;

  font-size:10px;
}


@media(max-width:850px){

  .dhMyHiresGrid{
    grid-template-columns:1fr;
  }

  .dhMyHireDetails{
    grid-template-columns:
      1fr 1fr;
  }

  .dhMyHireDetails>div:nth-child(2){
    border-right:0;
  }

  .dhMyHireDetails>div:nth-child(-n+2){
    border-bottom:
      1px solid #2a1b31;
  }

}


@media(max-width:600px){

  .dhYouAreHired{
    align-items:flex-start;

    gap:12px;

    margin:9px;

    padding:14px;
  }

  .dhHiredBurst{
    width:46px;
    height:46px;

    font-size:24px;
  }

  .dhHiredCopy strong{
    font-size:21px;
  }

  .dhMyHireDetails{
    grid-template-columns:1fr;
  }

  .dhMyHireDetails>div{
    border-right:0;

    border-bottom:
      1px solid #2a1b31;
  }

  .dhMyHireDetails>div:last-child{
    border-bottom:0;
  }

  .dhMyHireFooter{
    align-items:stretch;
    flex-direction:column;
  }

  .dhMyHireFooter .btn{
    width:100%;
  }

}




/* =========================================================
   DANCEHIRES V4 PROFESSIONAL HIRED V2
   ========================================================= */


/* FINAL HIRED STATE */


.dhFinalHiredCard{
  border-color:
    #219453!important;

  box-shadow:
    0 0 0 1px
    rgba(52,218,113,.08),
    0 18px 55px
    rgba(0,0,0,.28)!important;
}


.dhFinalHiredHero{
  display:flex;
  align-items:center;

  gap:16px;

  margin:
    14px;

  padding:
    17px 18px;

  border:
    1px solid #279f5b;

  border-radius:
    16px;

  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(48,226,115,.22),
      transparent 31%
    ),
    linear-gradient(
      100deg,
      #07391e,
      #0b1710
    );

  box-shadow:
    0 0 34px
    rgba(39,205,102,.11);
}


.dhFinalHiredIcon{
  width:55px;
  height:55px;

  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    2px solid #63eca0;

  border-radius:50%;

  background:
    rgba(23,108,55,.6);

  color:#91ffbe;

  font-size:30px;
  font-weight:900;

  box-shadow:
    0 0 25px
    rgba(70,226,127,.27);
}


.dhFinalHiredCopy{
  flex:1;
  min-width:0;
}


.dhFinalHiredCopy span{
  display:block;

  color:#61df95;

  font-size:8px;
  font-weight:900;

  letter-spacing:
    1.25px;
}


.dhFinalHiredCopy strong{
  display:block;

  margin-top:2px;

  color:#89ffb8;

  font-size:25px;
  line-height:1.05;
}


.dhFinalHiredCopy small{
  display:block;

  margin-top:5px;

  color:#abc0b1;

  font-size:10px;
}


.dhFinalHiredBadge{
  padding:
    8px 12px;

  border:
    1px solid #35a867;

  border-radius:
    999px;

  background:#0e4827;

  color:#83f3ad;

  font-size:8px;
  font-weight:900;

  letter-spacing:.7px;
}


/* UPCOMING JOBS */


.dhConfirmedJobsSection{
  margin-bottom:28px;
}


.dhConfirmedJobsHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:13px;
}


.dhConfirmedJobsHeader span,
.dhOpenOpportunitiesTitle span{
  color:#b246ef;

  font-size:8px;
  font-weight:900;

  letter-spacing:
    1.2px;
}


.dhConfirmedJobsHeader h2,
.dhOpenOpportunitiesTitle h2{
  margin:
    3px 0 0;

  color:#fff;

  font-size:27px;
}


.dhConfirmedJobsHeader p{
  margin:
    4px 0 0;

  color:#92869a;

  font-size:10px;
}


.dhConfirmedJobsCount{
  min-width:55px;

  padding:
    10px 14px;

  border:
    1px solid #3d2549;

  border-radius:
    13px;

  background:#100b14;

  color:#fff;

  font-size:25px;
  font-weight:900;

  text-align:center;
}


.dhConfirmedJobsList{
  display:grid;

  gap:14px;
}


.dhConfirmedJobCard{
  overflow:hidden;

  border:
    1px solid #356d49;

  border-radius:
    18px;

  background:
    radial-gradient(
      circle at 0 0,
      rgba(47,207,107,.11),
      transparent 34%
    ),
    #0f0a13;

  box-shadow:
    0 17px 42px
    rgba(0,0,0,.23);
}


.dhConfirmedJobMain{
  display:flex;
  align-items:center;

  gap:13px;

  padding:
    17px;
}


.dhConfirmedJobCheck{
  width:46px;
  height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  border:
    1px solid #299e5a;

  border-radius:
    14px;

  background:#123a22;

  color:#70eca2;

  font-size:23px;
  font-weight:900;
}


.dhConfirmedJobTitle{
  flex:1;
}


.dhConfirmedJobTitle>span{
  display:block;

  color:#5dd890;

  font-size:7px;
  font-weight:900;

  letter-spacing:1px;
}


.dhConfirmedJobTitle h3{
  margin:
    3px 0;

  color:#fff;

  font-size:18px;
}


.dhConfirmedJobTitle p{
  margin:0;

  color:#96899c;

  font-size:9px;
}


.dhConfirmedJobBadge{
  padding:
    7px 10px;

  border:
    1px solid #277847;

  border-radius:
    999px;

  background:#0f3921;

  color:#6fe29b;

  font-size:7px;
  font-weight:900;
}


.dhConfirmedJobDetails{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-top:
    1px solid #263129;

  border-bottom:
    1px solid #263129;

  background:#0a0d0b;
}


.dhConfirmedJobDetails>div{
  min-width:0;

  padding:
    12px 13px;

  border-right:
    1px solid #263129;
}


.dhConfirmedJobDetails>div:last-child{
  border-right:0;
}


.dhConfirmedJobDetails span{
  display:block;

  color:#68786c;

  font-size:7px;
  font-weight:900;

  letter-spacing:.8px;
}


.dhConfirmedJobDetails b{
  display:block;

  margin-top:4px;

  overflow:hidden;

  color:#e1e8e3;

  font-size:9px;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.dhConfirmedJobActions{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:
    13px 17px;
}


.dhConfirmedReady{
  display:flex;
  align-items:center;

  gap:7px;

  color:#8da396;

  font-size:9px;
}


.dhConfirmedReady i{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#51df8d;

  box-shadow:
    0 0 11px
    rgba(72,221,135,.55);
}


.dhOpenOpportunitiesTitle{
  margin:
    28px 0 12px;
}


/* OLD JOB CARD WHEN ALREADY HIRED */


.dhJobAlreadyHired{
  border-color:
    rgba(46,169,91,.38)!important;
}


.dhAlreadyHiredButton{
  border-color:
    #2d9254!important;

  background:
    rgba(20,81,43,.72)!important;

  color:
    #72e69e!important;

  cursor:
    default!important;

  opacity:1!important;
}


.dhAlreadyHiredNotice{
  display:flex;
  align-items:center;

  gap:10px;

  margin:
    10px 0;

  padding:
    10px 12px;

  border:
    1px solid #285d3c;

  border-radius:
    11px;

  background:
    rgba(15,53,31,.5);
}


.dhAlreadyHiredNotice>span{
  width:29px;
  height:29px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;

  border-radius:50%;

  background:#174728;

  color:#6ce39a;

  font-weight:900;
}


.dhAlreadyHiredNotice strong{
  display:block;

  color:#71e39c;

  font-size:9px;
}


.dhAlreadyHiredNotice small{
  display:block;

  margin-top:2px;

  color:#809287;

  font-size:8px;
}


@media(max-width:700px){

  .dhFinalHiredHero{
    align-items:flex-start;

    gap:11px;

    margin:9px;

    padding:13px;
  }

  .dhFinalHiredBadge{
    display:none;
  }

  .dhConfirmedJobDetails{
    grid-template-columns:
      1fr 1fr;
  }

  .dhConfirmedJobActions{
    flex-direction:column;
    align-items:stretch;
  }

  .dhConfirmedJobActions .btn{
    width:100%;
  }

}




/* =========================================================
   DANCEHIRES V4
   OPEN OPPORTUNITIES EMPTY STATE
   ========================================================= */

.dhNoOpenJobs{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  border:1px solid #33203c;
  border-radius:16px;
  background:#0f0a13;
}

.dhNoOpenJobsIcon{
  width:44px;
  height:44px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #2b8c50;
  border-radius:13px;
  background:#10301d;
  color:#6ee49b;
  font-size:22px;
  font-weight:900;
}

.dhNoOpenJobs strong{
  display:block;
  color:#fff;
  font-size:12px;
}

.dhNoOpenJobs p{
  margin:4px 0 0;
  color:#8d8192;
  font-size:9px;
}




/* =========================================================
   DANCEHIRES V4
   MESSAGING CENTER V1
   ========================================================= */


.dhMessageEyebrow{
  margin-bottom:4px;
  color:#a843e8;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.2px;
}


.dhMessageCenter{
  display:grid;
  grid-template-columns:
    310px minmax(0,1fr);

  height:
    min(
      720px,
      calc(100vh - 210px)
    );

  min-height:520px;

  overflow:hidden;

  border:
    1px solid #382244;

  border-radius:20px;

  background:#0b080e;

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.25);
}


/* INBOX */


.dhInbox{
  min-width:0;

  border-right:
    1px solid #2c1c34;

  background:
    linear-gradient(
      180deg,
      #100b14,
      #0b080e
    );
}


.dhInboxHeader{
  height:58px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:
    0 16px;

  border-bottom:
    1px solid #2c1c34;
}


.dhInboxHeader strong{
  color:#fff;
  font-size:12px;
}


.dhInboxHeader span{
  min-width:25px;

  padding:
    4px 7px;

  border:
    1px solid #4d2961;

  border-radius:
    999px;

  background:#1a0d22;

  color:#c168f1;

  font-size:8px;
  font-weight:900;

  text-align:center;
}


.dhConversationList{
  height:
    calc(100% - 58px);

  overflow-y:auto;
}


.dhConversationItem{
  position:relative;

  width:100%;

  display:grid;

  grid-template-columns:
    44px minmax(0,1fr) auto;

  gap:10px;

  align-items:center;

  padding:
    13px;

  border:0;

  border-bottom:
    1px solid #22172a;

  background:transparent;

  color:inherit;

  text-align:left;

  cursor:pointer;

  transition:
    background .16s ease,
    border-color .16s ease;
}


.dhConversationItem:hover{
  background:#130c18;
}


.dhConversationItem.active{
  background:
    linear-gradient(
      90deg,
      rgba(139,39,210,.17),
      rgba(76,25,101,.07)
    );

  box-shadow:
    inset 3px 0 0
    #aa47ef;
}


.dhConversationAvatar{
  position:relative;

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid #523066;

  border-radius:13px;

  overflow:visible;

  background:#1a0d22;

  color:#d58cff;

  font-size:12px;
  font-weight:900;
}


.dhConversationAvatar img{
  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:12px;
}


.dhUnreadDot{
  position:absolute;

  top:-2px;
  right:-2px;

  width:10px;
  height:10px;

  border:
    2px solid #100b14;

  border-radius:50%;

  background:#bc4df4;

  box-shadow:
    0 0 10px
    rgba(188,77,244,.6);
}


.dhConversationInfo{
  min-width:0;
}


.dhConversationNameRow{
  display:flex;
  align-items:center;

  gap:6px;
}


.dhConversationNameRow strong{
  overflow:hidden;

  color:#fff;

  font-size:10px;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.dhUnreadCount{
  min-width:17px;

  padding:
    2px 5px;

  border-radius:
    999px;

  background:#a53ae5;

  color:#fff;

  font-size:7px;

  text-align:center;
}


.dhConversationJob{
  display:block;

  margin-top:2px;

  overflow:hidden;

  color:#a34ad4;

  font-size:7px;
  font-weight:800;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.dhConversationInfo p{
  margin:
    4px 0 0;

  overflow:hidden;

  color:#807386;

  font-size:8px;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.dhConversationItem time{
  align-self:start;

  color:#655a6b;

  font-size:7px;
}


.dhEmptyInbox{
  padding:
    35px 20px;

  text-align:center;
}


.dhEmptyInbox b{
  display:block;

  color:#fff;
  font-size:11px;
}


.dhEmptyInbox p{
  color:#75697b;

  font-size:9px;
  line-height:1.5;
}


/* CHAT */


.dhChatPane{
  min-width:0;

  display:flex;
  flex-direction:column;

  background:
    radial-gradient(
      circle at 80% 0,
      rgba(119,31,172,.07),
      transparent 33%
    ),
    #0b080e;
}


.dhChatHeader{
  min-height:68px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:
    11px 17px;

  border-bottom:
    1px solid #2b1b33;
}


.dhChatIdentity{
  min-width:0;

  display:flex;
  align-items:center;

  gap:11px;
}


.dhChatAvatar{
  width:44px;
  height:44px;

  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  border:
    1px solid #643779;

  border-radius:13px;

  background:#1a0e22;

  color:#da96ff;

  font-size:12px;
  font-weight:900;
}


.dhChatAvatar img{
  width:100%;
  height:100%;

  object-fit:cover;
}


.dhChatRole{
  color:#9c47cb;

  font-size:7px;
  font-weight:900;

  letter-spacing:
    .9px;

  text-transform:uppercase;
}


.dhChatIdentity h3{
  margin:
    2px 0;

  color:#fff;

  font-size:15px;
}


.dhChatIdentity p{
  margin:0;

  color:#8d8094;

  font-size:8px;
}


.dhChatStatus{
  padding:
    6px 9px;

  border:
    1px solid #51305e;

  border-radius:
    999px;

  background:#18101d;

  color:#c794dd;

  font-size:7px;
  font-weight:900;
}


.dhChatStatus.hired{
  border-color:#287947;

  background:#0e321d;

  color:#68e499;
}


/* JOB CONTEXT */


.dhChatContextBar{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  border-bottom:
    1px solid #281a30;

  background:#0d0911;
}


.dhChatContextBar>div{
  min-width:0;

  padding:
    8px 12px;

  border-right:
    1px solid #281a30;
}


.dhChatContextBar>div:last-child{
  border-right:0;
}


.dhChatContextBar span{
  display:block;

  color:#6e6076;

  font-size:6px;
  font-weight:900;

  letter-spacing:
    .8px;
}


.dhChatContextBar b{
  display:block;

  margin-top:3px;

  overflow:hidden;

  color:#cfc4d4;

  font-size:8px;

  white-space:nowrap;

  text-overflow:ellipsis;
}


/* MESSAGES */


.dhChatMessages{
  flex:1;

  min-height:0;

  overflow-y:auto;

  padding:
    18px 19px 24px;
}


.dhMessageRow{
  display:flex;

  justify-content:flex-start;

  margin:
    7px 0;
}


.dhMessageRow.mine{
  justify-content:flex-end;
}


.dhMessageBubble{
  max-width:
    min(
      72%,
      570px
    );

  padding:
    10px 12px 7px;

  border:
    1px solid #35223f;

  border-radius:
    14px 14px 14px 4px;

  background:#15101a;

  color:#d8cedd;

  font-size:10px;
  line-height:1.5;

  box-shadow:
    0 7px 18px
    rgba(0,0,0,.13);
}


.dhMessageRow.mine
.dhMessageBubble{
  border-color:#70328d;

  border-radius:
    14px 14px 4px 14px;

  background:
    linear-gradient(
      135deg,
      #68288b,
      #48215e
    );

  color:#fff;
}


.dhMessageBubble time{
  display:block;

  margin-top:5px;

  color:#74687a;

  font-size:6px;

  text-align:right;
}


.dhMessageRow.mine
.dhMessageBubble time{
  color:#d0aee1;
}


.dhNoMessages,
.dhSelectConversation{
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-direction:column;

  padding:30px;

  text-align:center;
}


.dhNoMessagesIcon,
.dhSelectConversationIcon{
  width:56px;
  height:56px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:13px;

  border:
    1px solid #58306b;

  border-radius:17px;

  background:#180d20;

  color:#bd5bec;

  font-size:22px;
}


.dhNoMessages h3,
.dhSelectConversation h3{
  margin:0;

  color:#fff;

  font-size:17px;
}


.dhNoMessages p,
.dhSelectConversation p{
  max-width:330px;

  margin:
    6px 0 0;

  color:#807486;

  font-size:9px;
  line-height:1.6;
}


/* COMPOSER */


.dhMessageComposer{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) auto;

  gap:9px;

  padding:
    13px 15px;

  border-top:
    1px solid #2c1c34;

  background:#0d0911;
}


.dhMessageComposer textarea{
  min-height:46px;
  max-height:120px;

  resize:vertical;

  padding:
    11px 12px;

  border:
    1px solid #382345;

  border-radius:13px;

  outline:0;

  background:#09070c;

  color:#fff;

  font:inherit;
  font-size:10px;

  line-height:1.45;
}


.dhMessageComposer textarea:focus{
  border-color:#7e399f;

  box-shadow:
    0 0 0 2px
    rgba(140,53,184,.08);
}


.dhSendMessageButton{
  align-self:end;

  min-width:82px;

  min-height:46px;
}


/* MOBILE */


@media(max-width:850px){

  .dhMessageCenter{
    grid-template-columns:1fr;

    height:auto;

    min-height:650px;
  }

  .dhInbox{
    max-height:245px;

    border-right:0;

    border-bottom:
      1px solid #2c1c34;
  }

  .dhConversationList{
    max-height:185px;
  }

  .dhChatPane{
    min-height:480px;
  }

}


@media(max-width:600px){

  .dhChatContextBar{
    grid-template-columns:
      1fr 1fr;
  }

  .dhChatContextBar>div:nth-child(2){
    border-right:0;
  }

  .dhChatContextBar>div:nth-child(-n+2){
    border-bottom:
      1px solid #281a30;
  }

  .dhMessageBubble{
    max-width:88%;
  }

  .dhMessageComposer{
    grid-template-columns:1fr;
  }

  .dhSendMessageButton{
    width:100%;
  }

}




/* =========================================================
   DANCEHIRES V4
   MEMBERSHIP CENTER V1
   ========================================================= */


.dhMembershipPage{
  width:100%;
}


.dhMembershipHeading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}


.dhMembershipHeading h2{
  margin:2px 0 4px;
}


.dhMembershipHeading p{
  margin:0;
  color:#95889d;
}


.dhMembershipEyebrow,
.dhMembershipSmallLabel{
  color:#b04ef0;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.25px;
}


.dhMembershipStatus{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid #4d3158;
  border-radius:999px;
  background:#17101c;
  color:#aaa0af;
  font-size:8px;
  font-weight:900;
}


.dhMembershipStatus i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#807486;
}


.dhMembershipStatus.active{
  border-color:#226c3e;
  background:#0d2718;
  color:#63dc91;
}


.dhMembershipStatus.active i{
  background:#55de8a;
  box-shadow:
    0 0 10px
    rgba(85,222,138,.55);
}


.dhMembershipStatus.trial{
  border-color:#6b4a1e;
  color:#e9bb66;
}


.dhMembershipStatus.due{
  border-color:#72323c;
  color:#ee7d8d;
}


.dhMembershipHero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:25px;
  margin-bottom:15px;
  border:1px solid #4d2661;
  border-radius:20px;
  background:
    linear-gradient(
      135deg,
      #171020,
      #0e0912 72%
    );
}


.dhMembershipHeroGlow{
  position:absolute;
  width:270px;
  height:270px;
  top:-170px;
  right:80px;
  border-radius:50%;
  background:#8f2ed1;
  filter:blur(80px);
  opacity:.2;
  pointer-events:none;
}


.dhMembershipPlanIdentity{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:14px;
}


.dhMembershipPlanIcon{
  width:55px;
  height:55px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #71378e;
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      #8f24dc,
      #52147d
    );
  color:#fff;
  font-size:17px;
  font-weight:900;
  box-shadow:
    0 8px 30px
    rgba(139,38,211,.25);
}


.dhMembershipPlanIdentity h3{
  margin:3px 0 4px;
  color:#fff;
  font-size:20px;
}


.dhMembershipPlanIdentity p{
  max-width:480px;
  margin:0;
  color:#94879b;
  font-size:9px;
}


.dhMembershipPrice{
  position:relative;
  z-index:2;
  white-space:nowrap;
}


.dhMembershipPrice strong{
  color:#fff;
  font-size:31px;
}


.dhMembershipPrice span{
  color:#988a9f;
  font-size:10px;
}


.dhMembershipGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-bottom:15px;
}


.dhMembershipCard{
  padding:18px;
  border:1px solid #34203e;
  border-radius:17px;
  background:#100b14;
}


.dhMembershipCardHead{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:14px;
}


.dhMembershipCardHead h3{
  margin:4px 0 0;
  color:#fff;
  font-size:14px;
}


.dhMembershipDetails{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid #2b1c32;
  border-radius:13px;
  overflow:hidden;
}


.dhMembershipDetails>div{
  padding:11px;
  border-right:1px solid #2b1c32;
  border-bottom:1px solid #2b1c32;
}


.dhMembershipDetails>div:nth-child(2n){
  border-right:0;
}


.dhMembershipDetails>div:nth-last-child(-n+2){
  border-bottom:0;
}


.dhMembershipDetails span,
.dhBillingRow span{
  display:block;
  margin-bottom:4px;
  color:#716477;
  font-size:7px;
  font-weight:800;
}


.dhMembershipDetails b{
  color:#ddd3e1;
  font-size:9px;
}


.dhMembershipInlineStatus.active{
  color:#62dd91;
}


.dhMembershipInlineStatus.due{
  color:#ef8594;
}


.dhMembershipNotice{
  display:flex;
  gap:9px;
  align-items:center;
  margin-top:13px;
  padding:10px;
  border:1px solid #503040;
  border-radius:11px;
  background:#1a0e14;
}


.dhMembershipNotice>span{
  width:27px;
  height:27px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#421722;
  color:#ef778a;
  font-weight:900;
}


.dhMembershipNotice.good{
  border-color:#1e5935;
  background:#0c1d13;
}


.dhMembershipNotice.good>span{
  background:#123d24;
  color:#64df94;
}


.dhMembershipNotice b{
  display:block;
  color:#fff;
  font-size:9px;
}


.dhMembershipNotice p{
  margin:3px 0 0;
  color:#796e7e;
  font-size:7px;
}


.dhMembershipPercent{
  color:#c064f0;
  font-size:20px;
}


.dhMembershipProgress{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#211628;
}


.dhMembershipProgress>div{
  height:100%;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      #7a27d8,
      #be31f2
    );
}


.dhMembershipCardText{
  margin:13px 0;
  color:#897c90;
  font-size:9px;
  line-height:1.6;
}


.dhMembershipBenefits{
  margin-bottom:15px;
  padding:19px;
  border:1px solid #35203f;
  border-radius:17px;
  background:#100b14;
}


.dhMembershipBenefitsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:15px;
}


.dhMembershipBenefitsHead h3{
  margin:4px 0 0;
  color:#fff;
  font-size:15px;
}


.dhMembershipBenefitsHead>span{
  color:#8f8296;
  font-size:8px;
}


.dhMembershipBenefitsGrid{
  display:grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );
  gap:9px;
}


.dhMembershipBenefit{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:47px;
  padding:9px;
  border:1px solid #2d1c35;
  border-radius:12px;
  background:#0b080e;
}


.dhMembershipBenefitIcon{
  width:28px;
  height:28px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #59306c;
  border-radius:8px;
  background:#1a0d22;
  color:#bb5be9;
  font-size:10px;
  font-weight:900;
}


.dhMembershipBenefit span{
  color:#bcb1c1;
  font-size:8px;
  line-height:1.35;
}


.dhBillingRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-bottom:14px;
}


.dhBillingRow>div{
  padding:11px;
  border:1px solid #2d1d35;
  border-radius:11px;
  background:#0b080e;
}


.dhBillingRow strong{
  color:#fff;
  font-size:9px;
}


.dhAccountIdentity{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px;
  border:1px solid #2d1d35;
  border-radius:12px;
  background:#0b080e;
}


.dhAccountIdentityIcon{
  width:46px;
  height:46px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #623277;
  border-radius:13px;
  background:#1d0e26;
  color:#cf79f7;
  font-size:12px;
  font-weight:900;
}


.dhAccountIdentity b{
  display:block;
  color:#fff;
  font-size:11px;
}


.dhAccountIdentity span{
  display:block;
  margin-top:3px;
  color:#988b9f;
  font-size:8px;
}


.dhAccountIdentity small{
  display:block;
  margin-top:3px;
  color:#655b6a;
  font-size:7px;
}


.dhMembershipSoftware{
  display:grid;
  grid-template-columns:
    auto minmax(0,1fr)
    auto auto;
  align-items:center;
  gap:14px;
  margin-bottom:15px;
  padding:17px;
  border:1px solid #3e2850;
  border-radius:17px;
  background:
    linear-gradient(
      90deg,
      #140c1a,
      #0d0911
    );
}


.dhSoftwareIcon{
  width:43px;
  height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #66317f;
  border-radius:12px;
  background:#1c0e25;
  color:#bf5af0;
}


.dhMembershipSoftware h3{
  margin:3px 0;
  color:#fff;
  font-size:12px;
}


.dhMembershipSoftware p{
  margin:0;
  color:#796d80;
  font-size:8px;
}


.dhSoftwarePrice{
  text-align:right;
}


.dhSoftwarePrice b{
  display:block;
  color:#fff;
  font-size:17px;
}


.dhSoftwarePrice span{
  color:#776a7d;
  font-size:7px;
}


.dhMembershipSupport{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:17px;
  border:1px solid #302038;
  border-radius:17px;
  background:#0d0911;
}


.dhMembershipSupport h3{
  margin:3px 0;
  color:#fff;
  font-size:12px;
}


.dhMembershipSupport p{
  margin:0;
  color:#807385;
  font-size:8px;
}


@media(max-width:900px){

  .dhMembershipGrid{
    grid-template-columns:1fr;
  }

  .dhMembershipBenefitsGrid{
    grid-template-columns:
      1fr 1fr;
  }

  .dhMembershipSoftware{
    grid-template-columns:
      auto 1fr;
  }

  .dhSoftwarePrice{
    text-align:left;
  }

}


@media(max-width:600px){

  .dhMembershipHeading,
  .dhMembershipHero,
  .dhMembershipSupport{
    align-items:flex-start;
    flex-direction:column;
  }

  .dhMembershipBenefitsGrid{
    grid-template-columns:1fr;
  }

  .dhMembershipDetails,
  .dhBillingRow{
    grid-template-columns:1fr;
  }

  .dhMembershipDetails>div{
    border-right:0;
  }

  .dhMembershipSoftware{
    grid-template-columns:1fr;
  }

}



/* =========================================================
   DANCEHIRES V4
   PRODUCT CENTER V1
   ========================================================= */

.dhProductEyebrow{
  color:#c83cff;
  font-size:10px;
  line-height:1.2;
  letter-spacing:2px;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:7px;
}

.dhProductBadge,
.dhProductStatus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(195,55,255,.4);
  background:rgba(154,35,255,.08);
  color:#d875ff;
  border-radius:999px;
  padding:7px 11px;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
  white-space:nowrap;
}

.dhProductStatus.active{
  color:#74efa1;
  border-color:rgba(70,220,120,.35);
  background:rgba(35,180,90,.09);
}

.dhVideoSummaryCard{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  margin:16px 0;
  padding:20px;
  border:1px solid rgba(180,70,255,.22);
  border-radius:18px;
  background:
    radial-gradient(circle at 0 0,rgba(145,38,255,.10),transparent 35%),
    #0c0811;
}

.dhVideoSummaryIcon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(135deg,#6420ba,#b41cff);
  color:white;
  font-size:18px;
  box-shadow:0 0 28px rgba(170,30,255,.18);
}

.dhVideoSummaryCopy h3{
  margin:0 0 5px;
}

.dhVideoSummaryCopy p{
  margin:0;
  color:#9f94ab;
  font-size:13px;
}

.dhVideoSummaryAction{
  display:flex;
  align-items:center;
  gap:10px;
}

.dhProductHero,
.dhSoftwareHero,
.dhStudioSoftwareHero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(181,57,255,.30);
  border-radius:24px;
  padding:30px;
  margin-bottom:18px;
  background:
    radial-gradient(circle at 85% 10%,rgba(190,35,255,.18),transparent 30%),
    linear-gradient(135deg,#12091a,#09070d);
}

.dhProductHero{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:22px;
  align-items:center;
}

.dhProductHeroIcon{
  width:74px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:22px;
  background:linear-gradient(135deg,#6621bb,#bc20ff);
  font-size:26px;
  box-shadow:0 0 45px rgba(180,30,255,.25);
}

.dhProductHero h2,
.dhSoftwareHero h1,
.dhStudioSoftwareHero h1{
  margin:10px 0 8px;
}

.dhProductHero p,
.dhSoftwareHero p,
.dhStudioSoftwareHero p,
.dhProductFeature p,
.dhSeparateNotice p{
  color:#a99db4;
}

.dhSoftwareHero{
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:center;
}

.dhSoftwareHeroCopy{
  max-width:720px;
}

.dhSoftwarePriceBig{
  font-size:34px;
  font-weight:900;
  margin:22px 0;
}

.dhSoftwarePriceBig span{
  font-size:13px;
  font-weight:600;
  color:#a99db4;
}

.dhSoftwareHeroMark{
  width:140px;
  height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:35px;
  background:linear-gradient(135deg,#6020b6,#c223ff);
  font-size:42px;
  font-weight:900;
  box-shadow:0 0 70px rgba(180,30,255,.22);
}

.dhProductGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}

.dhProductFeature{
  display:flex;
  gap:13px;
  min-height:105px;
  padding:18px;
  border:1px solid rgba(180,70,255,.18);
  border-radius:16px;
  background:#0b080f;
}

.dhProductFeatureIcon{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  border:1px solid rgba(185,50,255,.35);
  background:rgba(160,30,255,.09);
  color:#cf64ff;
  font-weight:900;
}

.dhProductFeature h3{
  margin:2px 0 6px;
  font-size:14px;
}

.dhProductFeature p{
  margin:0;
  font-size:12px;
  line-height:1.55;
}

.dhSeparateNotice{
  border:1px solid rgba(181,57,255,.22);
  border-radius:18px;
  padding:22px;
  background:#0b080f;
}

.dhSeparateNotice h3{
  margin:3px 0 7px;
}

@media(max-width:900px){

  .dhProductGrid{
    grid-template-columns:1fr;
  }

  .dhSoftwareHero{
    grid-template-columns:1fr;
  }

  .dhSoftwareHeroMark{
    display:none;
  }

  .dhVideoSummaryCard{
    grid-template-columns:1fr;
  }

  .dhVideoSummaryAction{
    justify-content:space-between;
  }

  .dhProductHero{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   DANCEHIRES
   MASTER ECOSYSTEM HOMEPAGE V1
   ========================================================= */

.dhMasterPublicBody{
  margin:0;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(101,35,170,.22),
      transparent 34%
    ),
    #08060d;
  color:#fff;
}

.dhMasterPublicBody button{
  font:inherit;
}

.dhMasterSite{
  min-height:100vh;
  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(111,45,255,.09),
      transparent 24%
    );
}

.dhMasterNav{
  position:sticky;
  top:0;
  z-index:100;
  height:76px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 max(28px,calc((100vw - 1420px)/2));
  background:rgba(8,6,13,.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.dhMasterBrand{
  display:flex;
  align-items:center;
  gap:11px;
  color:#fff;
  background:none;
  border:0;
  font-size:23px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

.dhMasterLogo{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:16px;
  background:
    linear-gradient(
      135deg,
      #6d2cff,
      #c225ff
    );
  box-shadow:
    0 0 25px rgba(151,50,255,.38);
}

.dhMasterNavLinks{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  justify-content:center;
}

.dhMasterNavLinks button{
  color:#bdb4c8;
  background:none;
  border:0;
  padding:11px 9px;
  cursor:pointer;
  font-size:13px;
}

.dhMasterNavLinks button:hover{
  color:#fff;
}

.dhMasterNavActions{
  display:flex;
  gap:10px;
}

.dhMasterHero{
  position:relative;
  max-width:1420px;
  min-height:640px;
  margin:34px auto 0;
  padding:74px 70px;
  display:grid;
  grid-template-columns:
    minmax(0,1.25fr)
    minmax(320px,.75fr);
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(178,76,255,.27);
  border-radius:32px;
  background:
    linear-gradient(
      145deg,
      rgba(23,12,38,.95),
      rgba(9,6,14,.98)
    );
}

.dhMasterHeroGlow{
  position:absolute;
  width:720px;
  height:220px;
  left:10%;
  bottom:-135px;
  border-radius:50%;
  background:#8229ff;
  filter:blur(90px);
  opacity:.34;
}

.dhMasterHeroCopy{
  position:relative;
  z-index:2;
}

.dhMasterPill,
.dhProductTag,
.dhComingSoon{
  display:inline-flex;
  padding:8px 13px;
  border-radius:999px;
  border:1px solid rgba(196,74,255,.5);
  color:#d79cff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}

.dhMasterHero h1{
  margin:25px 0 20px;
  max-width:900px;
  font-size:clamp(54px,6.4vw,92px);
  line-height:.94;
  letter-spacing:-.055em;
}

.dhMasterHero h1 span{
  display:block;
  background:
    linear-gradient(
      90deg,
      #9b68ff,
      #ce37ff,
      #ff9c71
    );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.dhMasterHero p{
  max-width:760px;
  color:#bfb5c8;
  font-size:20px;
  line-height:1.55;
}

.dhMasterHeroActions,
.dhProductActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:27px;
}

.dhMasterHeroPrimary{
  min-width:190px;
}

.dhMascotStage{
  position:relative;
  min-height:370px;
  display:grid;
  place-items:center;
  z-index:3;
}

.dhMascotBubble{
  position:absolute;
  top:14px;
  right:16px;
  width:170px;
  padding:14px 16px;
  border-radius:20px 20px 5px 20px;
  color:#21162d;
  background:#fff;
  font-size:13px;
  line-height:1.4;
  box-shadow:0 16px 50px rgba(0,0,0,.26);
}

.dhMascotBubble strong{
  display:block;
}

.dhMascotCharacter{
  position:relative;
  width:225px;
  height:245px;
  border:0;
  cursor:pointer;
  border-radius:48% 48% 43% 43%;
  background:
    radial-gradient(
      circle at 34% 25%,
      #c9ecff,
      #7acbff 42%,
      #5a9dff 75%
    );
  box-shadow:
    0 30px 70px rgba(41,120,255,.28),
    inset 0 -18px 30px rgba(37,80,160,.22);
  animation:
    dhMascotFloat 4s ease-in-out infinite;
}

@keyframes dhMascotFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-12px);
  }
}

.dhMascotTop{
  position:absolute;
  top:-18px;
  left:96px;
  width:34px;
  height:32px;
  border-radius:50% 50% 20% 20%;
  background:#7bcaff;
  transform:rotate(8deg);
}

.dhMascotFace{
  position:absolute;
  left:50%;
  top:89px;
  display:flex;
  align-items:center;
  gap:19px;
  transform:translateX(-50%);
}

.dhMascotFace i{
  width:14px;
  height:18px;
  border-radius:50%;
  background:#172039;
  box-shadow:
    inset 3px 3px 2px rgba(255,255,255,.72);
}

.dhMascotFace b{
  width:31px;
  height:21px;
  border-radius:5px 5px 18px 18px;
  background:#252033;
}

.dhMascotArm{
  position:absolute;
  width:68px;
  height:34px;
  background:#68b7f7;
  border-radius:999px;
  top:125px;
}

.dhMascotArm.left{
  left:-48px;
  transform:rotate(-30deg);
}

.dhMascotArm.right{
  right:-48px;
  transform:rotate(30deg);
}

.dhMascotFoot{
  position:absolute;
  width:67px;
  height:30px;
  bottom:-10px;
  background:#438ee7;
  border-radius:50%;
}

.dhMascotFoot.left{
  left:34px;
}

.dhMascotFoot.right{
  right:34px;
}

.dhMasterIntro{
  max-width:880px;
  margin:115px auto 65px;
  padding:0 24px;
  text-align:center;
}

.dhMasterIntro h2{
  margin:14px 0;
  font-size:44px;
  letter-spacing:-.035em;
}

.dhMasterIntro p{
  color:#aaa0b6;
  font-size:18px;
  line-height:1.6;
}

.dhMasterProduct{
  max-width:1420px;
  margin:22px auto;
  padding:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
  align-items:center;
  border:1px solid rgba(255,255,255,.11);
  border-radius:28px;
  background:#100b16;
}

.dhMasterProduct h2{
  margin:18px 0;
  font-size:45px;
  line-height:1.05;
  letter-spacing:-.04em;
}

.dhMasterProduct p{
  color:#b8afc2;
  font-size:17px;
  line-height:1.58;
}

.dhProductFeatureGrid{
  margin-top:24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.dhProductFeatureGrid span{
  padding:13px 15px;
  border:1px solid rgba(184,91,255,.2);
  border-radius:12px;
  color:#d3cadc;
  background:#0b0810;
  font-size:13px;
}

.dhInterviewVisual{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:22px;
  background:#f6f7fb;
  color:#202431;
  box-shadow:
    0 25px 70px rgba(0,0,0,.33);
}

.dhInterviewTopbar{
  display:flex;
  justify-content:space-between;
  padding:17px 19px;
  background:#fff;
  border-bottom:1px solid #e7e8ec;
  font-weight:800;
}

.dhInterviewStatus{
  padding:6px 9px;
  border-radius:999px;
  color:#26725d;
  background:#e5faf2;
  font-size:10px;
}

.dhInterviewPeople{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  padding:13px;
}

.dhInterviewPerson{
  position:relative;
  height:245px;
  overflow:hidden;
  border-radius:14px;
  background:
    linear-gradient(
      145deg,
      #e8ebf4,
      #cfd4df
    );
}

.dhInterviewPerson.candidate{
  background:
    linear-gradient(
      145deg,
      #ead6cc,
      #f4ece6
    );
}

.dhFakePerson{
  position:absolute;
  width:126px;
  height:126px;
  left:50%;
  top:48px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#b5bccb;
}

.dhFakePerson:after{
  content:'';
  position:absolute;
  width:184px;
  height:125px;
  left:50%;
  top:104px;
  transform:translateX(-50%);
  border-radius:50% 50% 0 0;
  background:#69768b;
}

.dhFakePerson.candidateFace{
  background:#d5ab92;
}

.dhFakePerson.candidateFace:after{
  background:#b56d78;
}

.dhInterviewPerson small{
  position:absolute;
  left:13px;
  top:13px;
  z-index:3;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  font-weight:800;
}

.dhInterviewControls{
  display:flex;
  gap:12px;
  justify-content:center;
  padding:12px;
  border-top:1px solid #e5e7ec;
  background:#fff;
}

.dhInterviewControls span{
  padding:8px 11px;
  border-radius:9px;
  background:#edf0f5;
  font-size:11px;
  font-weight:800;
}

.dhInterviewControls .hangup{
  color:#fff;
  background:#df3651;
}

.dhInterviewFooter{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:16px 19px 20px;
  background:#fff;
}

.dhInterviewFooter span{
  color:#757b88;
  font-size:12px;
}

.dhSoftwareProduct{
  grid-template-columns:220px 1fr;
  background:
    linear-gradient(
      120deg,
      rgba(96,26,160,.25),
      #100b16 48%
    );
}

.dhSoftwareIcon{
  width:180px;
  height:180px;
  display:grid;
  place-items:center;
  margin:auto;
  border-radius:42px;
  font-size:70px;
  font-weight:900;
  background:
    linear-gradient(
      145deg,
      #6425d9,
      #c325ff
    );
  box-shadow:
    0 25px 70px rgba(157,43,255,.24);
}

.dhSeparateProduct{
  display:inline-flex;
  padding:10px 12px;
  border-radius:10px;
  background:#21142d;
  color:#cfa7ec !important;
  font-size:13px !important;
}

.dhStudioVisual{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.dhStudioKpi,
.dhStudioMiniPanel{
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:17px;
  background:#0a0710;
}

.dhStudioKpi small{
  color:#8f819d;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.dhStudioKpi strong{
  margin-top:7px;
  font-size:30px;
}

.dhStudioMiniPanel{
  grid-column:1/-1;
  min-height:155px;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(140,46,255,.26),
      transparent 37%
    ),
    #0a0710;
}

.dhStudioMiniPanel span{
  color:#9d91aa;
}

.dhStudioMiniPanel b{
  margin-top:7px;
  font-size:28px;
}

.dhExploreGrid{
  max-width:1420px;
  margin:22px auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.dhExploreCard{
  min-height:240px;
  padding:29px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  background:#100b16;
}

.dhExploreCard > span{
  color:#bd55ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.dhExploreCard h3{
  margin:18px 0 11px;
  font-size:28px;
}

.dhExploreCard p{
  min-height:66px;
  color:#aaa0b4;
  line-height:1.5;
}

.dhExploreCard button{
  padding:0;
  color:#ca73ff;
  background:none;
  border:0;
  font-weight:900;
  cursor:pointer;
}

.dhFeaturedSection{
  max-width:1420px;
  margin:95px auto 25px;
  padding:45px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:27px;
  background:
    linear-gradient(
      145deg,
      #120b1b,
      #0c0910
    );
}

.dhFeaturedHeader{
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:end;
}

.dhFeaturedHeader h2{
  margin:10px 0 0;
  font-size:38px;
}

.dhFeaturedComing{
  color:#8f829a;
  font-size:12px;
}

.dhFeaturedPlaceholderGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
  margin-top:27px;
}

.dhFeaturedPlaceholderGrid > div{
  min-height:145px;
  display:flex;
  flex-direction:column;
  justify-content:end;
  padding:18px;
  border:1px solid rgba(167,72,255,.2);
  border-radius:17px;
  background:
    radial-gradient(
      circle at 75% 15%,
      rgba(146,54,255,.19),
      transparent 40%
    ),
    #09070e;
}

.dhFeaturedPlaceholderGrid span{
  color:#9f91aa;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.11em;
}

.dhFeaturedPlaceholderGrid strong{
  margin-top:6px;
}

.dhMasterCTA{
  max-width:1000px;
  margin:110px auto;
  padding:70px 40px;
  text-align:center;
  border:1px solid rgba(182,66,255,.23);
  border-radius:30px;
  background:
    radial-gradient(
      circle at 50% 110%,
      rgba(161,39,255,.35),
      transparent 45%
    ),
    #100a16;
}

.dhMasterCTA h2{
  margin:13px 0;
  font-size:48px;
}

.dhMasterCTA p{
  color:#aca2b6;
  font-size:17px;
}

.dhMasterFooter{
  max-width:1420px;
  margin:auto;
  padding:32px 10px 50px;
  display:flex;
  gap:20px;
  align-items:center;
  color:#8e8497;
  border-top:1px solid rgba(255,255,255,.08);
}

.dhMasterFooter strong{
  color:#fff;
}

.dhMasterFooter button{
  margin-left:auto;
  color:#c879ff;
  background:none;
  border:0;
  cursor:pointer;
}

.dhMascotFloating{
  position:fixed;
  right:25px;
  bottom:24px;
  z-index:140;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 15px 10px 9px;
  color:#fff;
  border:1px solid rgba(193,92,255,.4);
  border-radius:999px;
  background:#17101f;
  box-shadow:
    0 15px 50px rgba(0,0,0,.45);
  cursor:pointer;
}

.dhMascotFloatingFace{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  color:#183057;
  border-radius:50%;
  background:
    linear-gradient(
      145deg,
      #bce9ff,
      #67b8ff
    );
  font-weight:900;
}

.dhMascotFloating small{
  font-weight:900;
}

.dhMascotAssistantPanel{
  position:fixed;
  right:24px;
  bottom:84px;
  z-index:160;
  width:min(390px,calc(100vw - 32px));
  overflow:hidden;
  opacity:0;
  transform:
    translateY(20px)
    scale(.96);
  pointer-events:none;
  transition:.2s ease;
  border:1px solid rgba(190,76,255,.35);
  border-radius:22px;
  background:#100b17;
  box-shadow:
    0 30px 100px rgba(0,0,0,.62);
}

.dhMascotAssistantPanel.open{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.dhMascotAssistantHead{
  display:flex;
  gap:12px;
  align-items:center;
  padding:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.dhMascotAssistantHead h3{
  margin:3px 0 0;
}

.dhMascotMini{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  color:#1c2f50;
  border-radius:50%;
  background:
    linear-gradient(
      145deg,
      #c8efff,
      #68b9ff
    );
}

.dhMascotEyes{
  letter-spacing:7px;
}

.dhMascotClose{
  margin-left:auto;
  color:#fff;
  background:none;
  border:0;
  font-size:26px !important;
  cursor:pointer;
}

.dhMascotAssistantBody{
  padding:18px;
}

.dhMascotAssistantBody > p{
  color:#b7adbf;
  line-height:1.5;
}

.dhMascotQuickActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:15px 0;
}

.dhMascotQuickActions button{
  padding:11px;
  color:#d6cae0;
  text-align:left;
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  background:#0a070e;
  cursor:pointer;
}

.dhMascotInputRow{
  display:flex;
  gap:7px;
}

.dhMascotInputRow input{
  flex:1;
  min-width:0;
  padding:12px;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  outline:none;
  background:#09070d;
}

.dhMascotInputRow button{
  padding:0 16px;
  color:#fff;
  border:0;
  border-radius:11px;
  background:#a42cff;
  font-weight:900;
  cursor:pointer;
}

.dhMascotAnswer{
  margin-top:12px;
  padding:12px;
  color:#bfb4c8;
  border-radius:10px;
  background:#09070d;
  font-size:13px;
  line-height:1.45;
}

.dhMascotAnswer button{
  display:block;
  margin-top:9px;
  padding:0;
  color:#d278ff;
  background:none;
  border:0;
  font-weight:900;
  cursor:pointer;
}

@media(max-width:1100px){

  .dhMasterNavLinks{
    display:none;
  }

  .dhMasterHero,
  .dhMasterProduct{
    grid-template-columns:1fr;
  }

  .dhMascotStage{
    min-height:300px;
  }

  .dhFeaturedPlaceholderGrid{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:720px){

  .dhMasterNav{
    padding:0 14px;
  }

  .dhMasterNavActions .btn:first-child{
    display:none;
  }

  .dhMasterHero{
    margin:15px;
    padding:50px 24px;
    min-height:auto;
  }

  .dhMasterHero h1{
    font-size:49px;
  }

  .dhMasterHero p{
    font-size:16px;
  }

  .dhMasterProduct{
    margin:15px;
    padding:28px 20px;
  }

  .dhMasterProduct h2{
    font-size:35px;
  }

  .dhProductFeatureGrid,
  .dhExploreGrid,
  .dhFeaturedPlaceholderGrid{
    grid-template-columns:1fr;
  }

  .dhExploreGrid{
    margin:15px;
  }

  .dhFeaturedSection{
    margin:70px 15px 15px;
    padding:27px 20px;
  }

  .dhFeaturedHeader{
    display:block;
  }

  .dhFeaturedComing{
    display:block;
    margin-top:12px;
  }

  .dhSoftwareProduct{
    grid-template-columns:1fr;
  }

  .dhSoftwareIcon{
    width:120px;
    height:120px;
    font-size:48px;
  }

  .dhInterviewPeople{
    grid-template-columns:1fr;
  }

  .dhInterviewPerson{
    height:180px;
  }

  .dhMasterCTA{
    margin:70px 15px;
    padding:50px 22px;
  }

  .dhMasterCTA h2{
    font-size:37px;
  }

  .dhMascotFloating small{
    display:none;
  }

}