/* ===== DanceFlow v2.6 Global Styles ===== */
*{margin:0;padding:0;box-sizing:border-box}

/* Icon gradient utility */
.icon-gradient{background:linear-gradient(135deg,#8B5CF6,#EC4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.material-symbols-rounded.icon-gradient{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* Icon sizes */
.icon-sm{width:24px;height:24px}
.icon-md{width:32px;height:32px}
.icon-lg{width:48px;height:48px}
.icon-xl{width:64px;height:64px}

html,body{
  min-height:100%;
  font-family:'DM Sans',-apple-system,'PingFang SC','Noto Sans SC',sans-serif;
  background:#FAFAFA;
  color:#1F2937;
  overflow-x:hidden;
}

/* Fluid gradient blobs */
.bg-blobs{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;animation:float 8s ease-in-out infinite}
.blob-1{width:340px;height:340px;background:linear-gradient(135deg,#8B5CF6,#EC4899);top:-60px;right:-80px;animation-delay:0s}
.blob-2{width:280px;height:280px;background:linear-gradient(135deg,#EC4899,#F97316);bottom:10%;left:-60px;animation-delay:2s}
.blob-3{width:200px;height:200px;background:linear-gradient(135deg,#8B5CF6,#6366F1);top:40%;right:10%;animation-delay:4s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-30px) scale(1.08)}}

/* Layout */
.container{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:24px 20px;min-height:100vh;display:flex;flex-direction:column;align-items:center}

/* Gradient title */
.gradient-text{background:linear-gradient(135deg,#8B5CF6,#EC4899,#F97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-2{background:linear-gradient(135deg,#8B5CF6,#EC4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* CTA button */
.cta{display:inline-flex;align-items:center;gap:8px;padding:16px 48px;border-radius:60px;background:linear-gradient(135deg,#8B5CF6,#EC4899);color:#fff;font-size:18px;font-weight:700;border:none;cursor:pointer;box-shadow:0 8px 30px rgba(139,92,246,.3);transition:transform .2s cubic-bezier(0.16,1,0.3,1),box-shadow .2s;text-decoration:none}
.cta:hover{transform:scale(1.06);box-shadow:0 12px 40px rgba(139,92,246,.4)}
.cta:active{transform:scale(.97)}
.cta.disabled{opacity:.4;pointer-events:none;transform:none}
.cta.full-width{display:block;width:100%;text-align:center}

/* Cards */
.card{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-radius:20px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.05);transition:transform .2s cubic-bezier(0.16,1,0.3,1)}
.card:hover{transform:translateY(-4px)}

/* Steps indicator */
.steps-bar{display:flex;align-items:center;justify-content:center;gap:0;margin:24px 0 32px}
.step-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:#E5E6ED;color:#9B9EAB;transition:all .3s;position:relative}
.step-dot.active{background:linear-gradient(135deg,#8B5CF6,#EC4899);color:#fff;box-shadow:0 4px 15px rgba(139,92,246,.3)}
.step-dot.done{background:#10B981;color:#fff}
.step-line{width:40px;height:3px;background:#E5E6ED;border-radius:2px}
.step-line.active{background:linear-gradient(90deg,#8B5CF6,#EC4899)}

/* Upload cards */
.upload-card{background:#fff;border:2px dashed transparent;border-radius:24px;padding:36px 20px;text-align:center;cursor:pointer;transition:all .25s;margin-bottom:16px;position:relative;overflow:hidden;background-image:repeating-linear-gradient(0deg,transparent,transparent 8px,#D1D3DD 8px,#D1D3DD 16px),repeating-linear-gradient(90deg,transparent,transparent 8px,#D1D3DD 8px,#D1D3DD 16px),repeating-linear-gradient(180deg,transparent,transparent 8px,#D1D3DD 8px,#D1D3DD 16px),repeating-linear-gradient(270deg,transparent,transparent 8px,#D1D3DD 8px,#D1D3DD 16px);background-size:2px 100%,100% 2px,2px 100%,100% 2px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat}
.upload-card:hover{background-image:repeating-linear-gradient(0deg,#8B5CF6,#8B5CF6 8px,#EC4899 8px,#EC4899 16px),repeating-linear-gradient(90deg,#8B5CF6,#8B5CF6 8px,#EC4899 8px,#EC4899 16px),repeating-linear-gradient(180deg,#EC4899,#EC4899 8px,#8B5CF6 8px,#8B5CF6 16px),repeating-linear-gradient(270deg,#EC4899,#EC4899 8px,#8B5CF6 8px,#8B5CF6 16px);background-color:#FDFAFF;transform:translateY(-2px);box-shadow:0 8px 30px rgba(139,92,246,.1)}
.upload-card.has-file{background-image:none;border:2px solid #8B5CF6;background-color:rgba(139,92,246,.03)}
.upload-card input[type=file]{display:none}

.preview{display:none;align-items:center;gap:12px;margin-top:12px;padding:12px;background:#F9FAFB;border-radius:12px}
.preview.show{display:flex}
.preview-thumb{width:64px;height:48px;border-radius:8px;background:#E5E6ED;object-fit:cover}
.preview-name{font-size:13px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-remove{width:28px;height:28px;border-radius:50%;border:none;background:#FEE2E2;color:#EF4444;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}

/* Spinner */
.spinner-wrap{position:relative;width:200px;height:200px;margin:0 auto 40px}
.spinner-ring{width:200px;height:200px;border-radius:50%;border:6px solid #F3F4F6;border-top:6px solid #8B5CF6;border-right:6px solid #EC4899;border-bottom:6px solid #F97316;animation:spin 1.2s linear infinite;position:absolute;top:0;left:0}
.spinner-ring-outer{width:200px;height:200px;border-radius:50%;border:3px solid transparent;border-top:3px solid rgba(139,92,246,.2);border-right:3px solid rgba(236,72,153,.2);animation:spin 2.4s linear infinite reverse;position:absolute;top:0;left:0}
.spinner-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:bounce-dancer 2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounce-dancer{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-55%) scale(1.1)}}

/* Progress bar */
.progress-track{width:100%;max-width:300px;height:8px;background:#F3F4F6;border-radius:4px;margin:0 auto;overflow:hidden}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#8B5CF6,#EC4899,#F97316);border-radius:4px;transition:width .6s ease}

/* Score ring */
.score-section{text-align:center;margin-bottom:40px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ring-wrap{position:relative;width:180px;height:180px;margin-bottom:20px}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:#F3F4F6;stroke-width:10}
.ring-fill{fill:none;stroke:url(#rg);stroke-width:10;stroke-linecap:round;stroke-dasharray:440;stroke-dashoffset:440;transition:stroke-dashoffset 1.2s ease}
.score-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:56px;font-weight:900;animation:pop .5s .5s cubic-bezier(0.16,1,0.3,1) both}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.score-badge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:8px 24px;border-radius:20px;background:linear-gradient(135deg,#8B5CF6,#EC4899);color:#fff;font-size:14px;font-weight:700}

/* Dimension cards */
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px;width:100%}
.dim-card{background:#fff;border-radius:20px;padding:18px 8px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.05);animation:slide-up .5s ease both}
.dim-card:nth-child(1){animation-delay:.4s}.dim-card:nth-child(2){animation-delay:.55s}.dim-card:nth-child(3){animation-delay:.7s}
@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.dim-ring{width:56px;height:56px;margin:0 auto 8px;position:relative}
.dim-ring svg{transform:rotate(-90deg);width:56px;height:56px}
.dim-bg{fill:none;stroke:#F3F4F6;stroke-width:5}
.dim-fill{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:150;animation:dim-in 1s .6s ease forwards}
@keyframes dim-in{to{stroke-dashoffset:var(--off)}}
.dim-val{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:16px;font-weight:800}
.dim-label{font-size:12px;font-weight:700;color:#6B6E7B;margin-top:4px}

/* Timeline */
.section-title{font-size:16px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.timeline{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.tl-row{display:flex;align-items:center;gap:10px}
.tl-label{font-size:12px;color:#9B9EAB;width:56px;flex-shrink:0;text-align:right}
.tl-bar-bg{flex:1;height:12px;background:#F3F4F6;border-radius:8px;overflow:hidden}
.tl-bar{height:100%;border-radius:8px;transition:width .6s}
.tl-score{font-size:12px;font-weight:700;width:32px;text-align:right}

/* Buttons */
.btn-primary{flex:1;padding:14px;border-radius:60px;background:linear-gradient(135deg,#8B5CF6,#EC4899);color:#fff;font-size:16px;font-weight:700;border:none;cursor:pointer;box-shadow:0 6px 24px rgba(139,92,246,.25);transition:transform .2s cubic-bezier(0.16,1,0.3,1);display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn-primary:hover{transform:scale(1.04)}
.btn-outline{flex:1;padding:14px;border-radius:60px;background:transparent;color:#8B5CF6;font-size:16px;font-weight:700;border:2px solid #D1D3DD;cursor:pointer;transition:all .2s;text-decoration:none;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-outline:hover{background:rgba(139,92,246,.06)}
.btns{display:flex;gap:12px;width:100%}

/* Tip card */
.tip-card{padding:16px 20px;background:rgba(255,255,255,.8);border-radius:16px;font-size:13px;color:#6B6E7B;line-height:1.6;box-shadow:0 2px 12px rgba(0,0,0,.04);display:flex;align-items:flex-start;gap:8px}
.tip-card strong{color:#8B5CF6}

/* Wave */
.wave{position:fixed;bottom:0;left:0;width:100%;z-index:0}

/* Skeleton / coming-soon bar */
.coming-soon-bar{padding:12px 16px;background:rgba(139,92,246,0.04);border-radius:12px;font-size:13px;color:#9B9EAB;display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:24px}

/* Responsive */
@media(min-width:768px){
  .container{max-width:560px}
  .dims{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:374px){
  .dims{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.seg-tag{font-size:11px;font-weight:500;padding:2px 8px;border-radius:12px;border:1px solid;background:rgba(255,255,255,0.7)}