* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  font-family:-apple-system,'Segoe UI',Roboto,sans-serif;
  background:#06030d; color:#fff;
  overflow-x:hidden; padding-bottom:100px;
  position:relative;
  min-height:100vh;
}

body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,0,153,0.5), transparent 35%),
    radial-gradient(circle at 85% 20%, rgba(170,255,0,0.35), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(120,0,255,0.5), transparent 45%),
    radial-gradient(circle at 90% 70%, rgba(0,212,255,0.35), transparent 40%);
  filter:blur(60px);
  animation:aurora 20s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform:scale(1) rotate(0deg); }
  100% { transform:scale(1.15) rotate(4deg); }
}
body::after {
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* HEADER */
.header {
  padding:14px 20px;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  background:linear-gradient(135deg, rgba(20,10,35,0.95), rgba(6,3,13,0.95));
  backdrop-filter:blur(28px);
  z-index:100;
  border-bottom:2px solid rgba(168,85,247,0.4);
  box-shadow:0 10px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow:hidden;
  gap:14px;
}
.header::before {
  content:''; position:absolute; top:-50%; left:-20%;
  width:60%; height:200%;
  background:radial-gradient(circle, rgba(168,85,247,0.28), transparent 60%);
  pointer-events:none;
  animation:headerGlow 8s ease-in-out infinite;
}
.header::after {
  content:''; position:absolute; top:-50%; right:-20%;
  width:60%; height:200%;
  background:radial-gradient(circle, rgba(255,0,153,0.25), transparent 60%);
  pointer-events:none;
  animation:headerGlow 10s ease-in-out infinite reverse;
}
@keyframes headerGlow {
  0%,100% { transform:translateX(0); opacity:0.7; }
  50% { transform:translateX(30px); opacity:1; }
}

.logo-camera {
  width:56px; height:56px; border-radius:18px;
  background:linear-gradient(135deg, rgba(255,102,204,0.5), rgba(168,85,247,0.5), rgba(0,212,255,0.5));
  backdrop-filter:blur(20px);
  border:2px solid rgba(255,255,255,0.4);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(168,85,247,0.7), inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(0,0,0,0.25);
  animation:cameraPulse 3s ease-in-out infinite;
  position:relative; overflow:hidden; flex-shrink:0; z-index:2;
}
.logo-camera::before {
  content:''; position:absolute; top:-50%; left:-50%;
  width:200%; height:200%;
  background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  animation:shine 4s ease-in-out infinite;
}
@keyframes shine {
  0% { transform:translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform:translateX(100%) translateY(100%) rotate(45deg); }
}
@keyframes cameraPulse {
  0%,100% { transform:scale(1) rotate(0deg); box-shadow:0 10px 28px rgba(168,85,247,0.7); }
  50% { transform:scale(1.06) rotate(-3deg); box-shadow:0 14px 36px rgba(168,85,247,0.95); }
}
.camera-inner { position:relative; z-index:2; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.camera-svg { width:34px; height:34px; position:absolute; opacity:0.95; }
.camera-p {
  font-size:28px; font-weight:900;
  background:linear-gradient(135deg, #fff 0%, #ff66cc 40%, #aaff00 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  position:relative; z-index:3;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(168,85,247,0.9));
  animation:pBounce 2s ease-in-out infinite;
  font-family:'Arial Black', 'Impact', sans-serif;
}
@keyframes pBounce {
  0%,100% { transform:translateY(0) scale(1) rotate(0deg); }
  50% { transform:translateY(-2px) scale(1.12) rotate(3deg); }
}

.logo-text {
  flex:1; display:flex; align-items:center; justify-content:space-between;
  padding:0 6px; position:relative; z-index:2; height:56px; min-width:0;
}
.logo-text .letter {
  font-size:clamp(28px, 4vw, 42px); font-weight:900;
  font-family:'Arial Black', 'Impact', 'Helvetica', sans-serif;
  letter-spacing:-2px; line-height:1;
  background:linear-gradient(135deg, #ff66cc 0%, #a855f7 30%, #00d4ff 60%, #aaff00 100%);
  background-size:200% 200%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:gradientShift 4s ease infinite, letterBounce 2.5s ease-in-out infinite;
  filter:drop-shadow(0 3px 20px rgba(168,85,247,0.8));
  text-transform:uppercase; font-style:italic;
}
.logo-text .letter:nth-child(1) { animation-delay:0s, 0s; }
.logo-text .letter:nth-child(2) { animation-delay:0s, 0.15s; }
.logo-text .letter:nth-child(3) { animation-delay:0s, 0.3s; }
.logo-text .letter:nth-child(4) { animation-delay:0s, 0.45s; }
.logo-text .letter:nth-child(5) { animation-delay:0s, 0.6s; }
@keyframes letterBounce {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-4px) scale(1.1); }
}
@keyframes gradientShift {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
.logo-text .dot {
  color:#aaff00; -webkit-text-fill-color:#aaff00;
  text-shadow:0 0 20px #aaff00, 0 0 40px #aaff00;
  font-size:clamp(32px, 5vw, 46px); line-height:0;
  font-family:'Arial Black', 'Impact', sans-serif;
  animation:dotPulse 1.5s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.6; transform:scale(1.15); }
}

.dance-wrap {
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:2; flex-shrink:0;
  background:transparent; border:none; padding:0;
}
.anime-gif {
  height:75px; width:auto; object-fit:contain;
  background:transparent; border:none;
  filter:drop-shadow(0 4px 12px rgba(168,85,247,0.5));
  transition:transform 0.3s; opacity:1;
}
.anime-gif:hover { transform:scale(1.1); }

.header-actions { display:flex; align-items:center; gap:10px; position:relative; z-index:2; flex-shrink:0; }
.icon-btn {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 100%);
  backdrop-filter:blur(20px);
  border:1.5px solid rgba(255,255,255,0.25);
  box-shadow:0 6px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.icon-btn:active { transform:scale(0.9); }
.icon-btn:hover { box-shadow:0 8px 26px rgba(168,85,247,0.6), inset 0 1px 0 rgba(255,255,255,0.5); border-color:rgba(168,85,247,0.6); }
.icon-btn svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

/* SEARCH */
.search-bar { margin:16px 20px 0; padding:14px 18px; background:linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)); backdrop-filter:blur(24px); border:1.5px solid rgba(255,255,255,0.15); border-radius:18px; display:flex; align-items:center; gap:12px; position:relative; z-index:5; box-shadow:0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
.search-bar svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0.7; }
.search-bar input { flex:1; background:none; border:none; color:#fff; font-size:14px; font-family:inherit; outline:none; font-weight:500; }
.search-bar input::placeholder { color:#8a7fb0; }

/* HERO */
.hero { padding:22px 20px 14px; position:relative; z-index:5; }
.hero-title { font-size:28px; font-weight:900; line-height:1.15; letter-spacing:-0.8px; margin-bottom:8px; text-shadow:0 4px 20px rgba(0,0,0,0.5); }
.hero-title span { background:linear-gradient(135deg,#ff66cc,#a855f7,#00d4ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 2px 16px rgba(168,85,247,0.5)); }
.hero-sub { font-size:13px; color:#a99bc4; line-height:1.5; font-weight:500; }

/* FEATURED SLIDER */
.featured-scroll { display:flex; gap:14px; overflow-x:auto; padding:6px 20px 22px; scrollbar-width:none; scroll-snap-type:x mandatory; position:relative; z-index:5; scroll-behavior:smooth; }
.featured-scroll::-webkit-scrollbar { display:none; }
.feature-slide { flex:0 0 82%; scroll-snap-align:start; height:200px; border-radius:26px; display:flex; align-items:flex-end; cursor:pointer; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.2); transition:transform 0.3s; isolation:isolate; }
.feature-slide:active { transform:scale(0.97); }
.feature-slide .bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; transition:transform 8s ease-in-out; }
.feature-slide:hover .bg-img { transform:scale(1.08); }
.feature-slide::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.9) 100%); z-index:1; }
.feature-slide::after { content:''; position:absolute; inset:0; mix-blend-mode:overlay; z-index:1; pointer-events:none; }
.fs-1::after { background:linear-gradient(135deg, rgba(96,165,250,0.45), rgba(168,85,247,0.25) 70%); }
.fs-2::after { background:linear-gradient(135deg, rgba(255,0,153,0.45), rgba(255,102,179,0.2) 70%); }
.fs-3::after { background:linear-gradient(135deg, rgba(0,212,255,0.45), rgba(0,255,170,0.25) 70%); }
.fs-4::after { background:linear-gradient(135deg, rgba(250,204,21,0.45), rgba(251,146,60,0.25) 70%); }
.fs-5::after { background:linear-gradient(135deg, rgba(168,85,247,0.45), rgba(236,72,153,0.25) 70%); }
.fs-1 { box-shadow:0 22px 45px -12px rgba(96,165,250,0.6), 0 12px 25px -8px rgba(168,85,247,0.4), inset 0 2px 0 rgba(255,255,255,0.4); }
.fs-2 { box-shadow:0 22px 45px -12px rgba(255,0,153,0.6), 0 12px 25px -8px rgba(255,102,179,0.4), inset 0 2px 0 rgba(255,255,255,0.4); }
.fs-3 { box-shadow:0 22px 45px -12px rgba(0,212,255,0.6), 0 12px 25px -8px rgba(0,255,170,0.4), inset 0 2px 0 rgba(255,255,255,0.4); }
.fs-4 { box-shadow:0 22px 45px -12px rgba(250,204,21,0.6), 0 12px 25px -8px rgba(251,146,60,0.4), inset 0 2px 0 rgba(255,255,255,0.4); }
.fs-5 { box-shadow:0 22px 45px -12px rgba(168,85,247,0.6), 0 12px 25px -8px rgba(236,72,153,0.4), inset 0 2px 0 rgba(255,255,255,0.4); }
.fs-hook { position:absolute; top:14px; right:14px; z-index:3; padding:5px 10px; border-radius:8px; font-size:9px; font-weight:900; letter-spacing:1px; background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.75)); color:#0a0a0f; backdrop-filter:blur(10px); box-shadow:0 6px 20px rgba(255,255,255,0.4), inset 0 1px 0 rgba(255,255,255,0.9); animation:hookPulse 2s ease-in-out infinite; }
@keyframes hookPulse { 0%,100% { transform:scale(1); box-shadow:0 6px 20px rgba(255,255,255,0.4); } 50% { transform:scale(1.05); box-shadow:0 8px 28px rgba(255,255,255,0.6); } }
.fs-content { position:relative; z-index:2; padding:18px 20px; width:100%; display:flex; align-items:center; gap:14px; }
.fs-icon { width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.1)); backdrop-filter:blur(14px); border:1.5px solid rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:inset 0 2px 0 rgba(255,255,255,0.6), 0 8px 20px rgba(0,0,0,0.3); }
.fs-icon svg { width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.fs-text { flex:1; }
.fs-tag { display:inline-block; background:linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.08)); backdrop-filter:blur(10px); color:#fff; font-size:9px; font-weight:900; padding:4px 10px; border-radius:8px; letter-spacing:0.8px; margin-bottom:8px; border:1px solid rgba(255,255,255,0.25); }
.fs-title { font-size:18px; font-weight:900; margin-bottom:4px; letter-spacing:-0.3px; text-shadow:0 2px 8px rgba(0,0,0,0.7); color:#fff; }
.fs-desc { font-size:12px; color:rgba(255,255,255,0.9); font-weight:500; text-shadow:0 1px 4px rgba(0,0,0,0.6); }

/* DOTS */
.slider-dots { display:flex; justify-content:center; gap:6px; padding:0 20px 20px; position:relative; z-index:5; }
.dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.25); transition:all 0.3s; }
.dot.active { width:24px; border-radius:6px; background:linear-gradient(90deg,#ff66cc,#a855f7); box-shadow:0 0 12px rgba(255,102,204,0.6); }

/* SECTION LABEL */
.section-label { padding:8px 20px 14px; font-size:12px; font-weight:900; color:#a99bc4; letter-spacing:2px; text-transform:uppercase; position:relative; z-index:5; display:flex; align-items:center; gap:10px; }
.section-label::before { content:''; width:20px; height:2px; border-radius:2px; background:linear-gradient(90deg,#ff66cc,#a855f7); box-shadow:0 0 10px rgba(255,102,204,0.6); }

/* CATEGORY GRID */
.category-grid { padding:0 20px 24px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; position:relative; z-index:5; }
.category-card { border-radius:22px; padding:0; cursor:pointer; position:relative; overflow:hidden; min-height:170px; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,0.15); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); isolation:isolate; }
.category-card:active { transform:scale(0.95); }
.cat-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:0; opacity:0.4; transition:transform 0.6s, opacity 0.3s; }
.category-card:hover .cat-img { transform:scale(1.08); opacity:0.55; }
.cc-overlay { position:absolute; inset:0; z-index:1; border-radius:22px; }
.category-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 25%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 100%); pointer-events:none; border-radius:22px; z-index:2; }
.category-card::before { content:''; position:absolute; top:-40%; right:-40%; width:120%; height:120%; background:radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 50%); pointer-events:none; opacity:0.5; z-index:2; }
.cat-hook { position:absolute; top:10px; right:10px; z-index:4; padding:4px 8px; border-radius:6px; font-size:8px; font-weight:900; letter-spacing:0.8px; background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8)); color:#0a0a0f; box-shadow:0 4px 14px rgba(255,255,255,0.35); }
.cat-hook.hot { background:linear-gradient(135deg, #ff0080, #ff66b3); color:#fff; box-shadow:0 4px 14px rgba(255,0,128,0.5); }
.cat-hook.new { background:linear-gradient(135deg, #a855f7, #00d4ff); color:#fff; box-shadow:0 4px 14px rgba(168,85,247,0.5); }
.cat-hook.pro { background:linear-gradient(135deg, #facc15, #fb923c); color:#0a0a0f; box-shadow:0 4px 14px rgba(250,204,21,0.5); }
.cc-1 { box-shadow:0 20px 40px -12px rgba(168,85,247,0.65), 0 8px 20px -6px rgba(168,85,247,0.35), inset 0 2px 0 rgba(255,255,255,0.35); }
.cc-1 .cc-overlay { background:linear-gradient(160deg, rgba(124,58,237,0.7) 0%, rgba(76,29,149,0.92) 100%); }
.cc-2 { box-shadow:0 20px 40px -12px rgba(96,165,250,0.65), 0 8px 20px -6px rgba(96,165,250,0.35), inset 0 2px 0 rgba(255,255,255,0.35); }
.cc-2 .cc-overlay { background:linear-gradient(160deg, rgba(37,99,235,0.7) 0%, rgba(30,58,138,0.92) 100%); }
.cc-3 { box-shadow:0 20px 40px -12px rgba(52,211,153,0.65), 0 8px 20px -6px rgba(52,211,153,0.35), inset 0 2px 0 rgba(255,255,255,0.4); }
.cc-3 .cc-overlay { background:linear-gradient(160deg, rgba(5,150,105,0.7) 0%, rgba(6,78,59,0.92) 100%); }
.cc-4 { box-shadow:0 20px 40px -12px rgba(255,0,153,0.65), 0 8px 20px -6px rgba(255,0,153,0.35), inset 0 2px 0 rgba(255,255,255,0.35); }
.cc-4 .cc-overlay { background:linear-gradient(160deg, rgba(219,39,119,0.7) 0%, rgba(157,23,77,0.92) 100%); }
.cc-5 { box-shadow:0 20px 40px -12px rgba(251,146,60,0.65), 0 8px 20px -6px rgba(251,146,60,0.35), inset 0 2px 0 rgba(255,255,255,0.4); }
.cc-5 .cc-overlay { background:linear-gradient(160deg, rgba(234,88,12,0.7) 0%, rgba(154,52,18,0.92) 100%); }
.cc-6 { box-shadow:0 20px 40px -12px rgba(248,113,113,0.65), 0 8px 20px -6px rgba(248,113,113,0.35), inset 0 2px 0 rgba(255,255,255,0.35); }
.cc-6 .cc-overlay { background:linear-gradient(160deg, rgba(220,38,38,0.7) 0%, rgba(153,27,27,0.92) 100%); }
.cc-7 { box-shadow:0 20px 40px -12px rgba(34,211,238,0.65), 0 8px 20px -6px rgba(34,211,238,0.35), inset 0 2px 0 rgba(255,255,255,0.4); }
.cc-7 .cc-overlay { background:linear-gradient(160deg, rgba(8,145,178,0.7) 0%, rgba(21,94,117,0.92) 100%); }
.cat-content { position:relative; z-index:3; padding:16px; display:flex; flex-direction:column; height:100%; flex:1; justify-content:space-between; }
.cat-thumbs { display:flex; gap:6px; margin-bottom:auto; }
.cat-thumb { width:36px; height:36px; border-radius:10px; object-fit:cover; object-position:center 30%; border:2px solid rgba(255,255,255,0.5); box-shadow:0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3); background:#111; }
.cat-thumb:nth-child(2) { margin-left:-14px; }
.cat-thumb:nth-child(3) { margin-left:-14px; }
.cat-bottom { display:flex; flex-direction:column; }
.cat-name { font-size:15px; font-weight:900; margin-bottom:3px; letter-spacing:-0.3px; text-shadow:0 2px 6px rgba(0,0,0,0.7); }
.cat-desc { font-size:11px; opacity:0.92; line-height:1.35; font-weight:500; text-shadow:0 1px 4px rgba(0,0,0,0.7); margin-bottom:8px; }
.cat-badge { display:inline-block; align-self:flex-start; font-size:10px; font-weight:800; background:linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.1)); color:#fff; padding:4px 10px; border-radius:8px; backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.25); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3); }

/* PRO CARD */
.pro-card { margin:0 20px 24px; padding:24px; background:linear-gradient(135deg, rgba(255,0,153,0.2), rgba(168,85,247,0.2)); backdrop-filter:blur(24px); border:1.5px solid rgba(255,102,204,0.35); border-radius:26px; position:relative; overflow:hidden; z-index:5; box-shadow:0 25px 60px -15px rgba(255,0,153,0.4), 0 12px 30px -10px rgba(168,85,247,0.3), inset 0 2px 0 rgba(255,255,255,0.25); }
.pro-card::before { content:'✨'; position:absolute; right:-20px; top:-30px; font-size:130px; opacity:0.15; }
.pro-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.1) 100%); pointer-events:none; border-radius:26px; }
.pro-badge { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#facc15,#fb923c); color:#000; font-size:10px; font-weight:900; padding:5px 12px; border-radius:8px; margin-bottom:14px; letter-spacing:0.8px; box-shadow:0 6px 20px rgba(250,204,21,0.4); position:relative; z-index:2; }
.pro-title { font-size:22px; font-weight:900; margin-bottom:8px; letter-spacing:-0.6px; position:relative; z-index:2; }
.pro-desc { font-size:13px; color:#c0b0d8; line-height:1.5; margin-bottom:14px; position:relative; z-index:2; }
.pro-pricing { display:flex; gap:10px; margin-bottom:18px; position:relative; z-index:2; }
.price-box { flex:1; padding:12px; border-radius:14px; background:rgba(255,255,255,0.08); border:1.5px solid rgba(255,255,255,0.15); text-align:center; }
.price-box.best { background:linear-gradient(135deg, rgba(250,204,21,0.2), rgba(251,146,60,0.2)); border-color:rgba(250,204,21,0.5); position:relative; }
.price-box .amount { font-size:22px; font-weight:900; }
.price-box .period { font-size:10px; color:#c0b0d8; font-weight:600; }
.price-box.best .period { color:#facc15; }
.price-tag { font-size:9px; font-weight:800; color:#000; background:linear-gradient(135deg,#facc15,#fb923c); padding:2px 6px; border-radius:4px; position:absolute; top:-8px; left:50%; transform:translateX(-50%); }
.pro-features { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; position:relative; z-index:2; }
.pro-feature { font-size:11px; color:#e0d0f0; font-weight:600; background:rgba(255,255,255,0.08); padding:7px 11px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); }
.pro-btn { width:100%; padding:16px; background:linear-gradient(135deg,#ff0080,#a855f7); border:none; border-radius:16px; color:#fff; font-size:14px; font-weight:900; cursor:pointer; font-family:inherit; letter-spacing:0.5px; position:relative; z-index:2; box-shadow:0 12px 30px rgba(255,0,128,0.5); }

/* BOTTOM NAV */
.bottom-nav { position:fixed; bottom:14px; left:14px; right:14px; background:linear-gradient(135deg, rgba(20,15,30,0.9), rgba(6,3,13,0.9)); backdrop-filter:blur(30px); border:1.5px solid rgba(255,255,255,0.12); border-radius:28px; display:flex; justify-content:space-around; align-items:center; padding:10px 8px; z-index:100; box-shadow:0 20px 50px rgba(0,0,0,0.6); }
.nav-item { display:flex; flex-direction:column; align-items:center; gap:4px; color:#7a6d94; font-size:9px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; cursor:pointer; padding:6px 14px; border-radius:16px; }
.nav-item.active { color:#fff; background:linear-gradient(135deg, rgba(255,0,153,0.3), rgba(168,85,247,0.3)); }
.nav-icon { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.create-btn { width:56px; height:56px; border-radius:50%; background:radial-gradient(circle at 30% 25%, #ff66cc 0%, #ff0099 50%, #a855f7 100%); display:flex; align-items:center; justify-content:center; margin-top:-6px; cursor:pointer; box-shadow:0 12px 30px rgba(255,0,153,0.6); }
.create-btn svg { width:26px; height:26px; stroke:#fff; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* SCREENS */
.screen { display:none; }
.screen.active { display:block; }

/* CATEGORY PAGE */
.cat-page-header { padding:16px 20px; display:flex; align-items:center; gap:14px; position:sticky; top:0; background:rgba(6,3,13,0.75); backdrop-filter:blur(24px); z-index:100; border-bottom:1px solid rgba(255,255,255,0.06); }
.back-btn { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.03)); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.15); box-shadow:0 6px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 0.2s; }
.back-btn:active { transform:scale(0.92); }
.back-btn svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.cat-page-title { font-size:20px; font-weight:900; letter-spacing:-0.5px; }
.cat-page-hero { margin:20px; padding:28px 26px; border-radius:26px; position:relative; overflow:hidden; background:linear-gradient(135deg, rgba(168,85,247,0.35), rgba(236,72,153,0.35)); backdrop-filter:blur(24px); border:1.5px solid rgba(255,255,255,0.2); box-shadow:0 25px 60px -15px rgba(168,85,247,0.5), 0 12px 30px -10px rgba(236,72,153,0.35), inset 0 2px 0 rgba(255,255,255,0.3); }
.cat-page-hero::before { content:'✨'; position:absolute; right:-20px; top:-30px; font-size:150px; opacity:0.12; }
.cat-page-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.1) 100%); pointer-events:none; border-radius:26px; }
.cat-hero-name { font-size:28px; font-weight:900; margin-bottom:8px; letter-spacing:-0.8px; position:relative; z-index:2; text-shadow:0 2px 10px rgba(0,0,0,0.3); }
.cat-hero-desc { font-size:14px; color:rgba(255,255,255,0.85); line-height:1.5; position:relative; z-index:2; }

/* TOOLS LIST */
.tools-list { padding:8px 20px 30px; display:flex; flex-direction:column; gap:12px; }
.tool-item { display:flex; align-items:center; gap:12px; padding:16px; border-radius:20px; background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); backdrop-filter:blur(20px); border:1.5px solid rgba(255,255,255,0.12); box-shadow:0 12px 30px -8px rgba(0,0,0,0.4), inset 0 1.5px 0 rgba(255,255,255,0.25); cursor:pointer; transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1); position:relative; overflow:hidden; min-height:80px; }
.tool-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:0.15; z-index:0; transition:opacity 0.3s, transform 0.4s; pointer-events:none; }
.tool-item:hover .tool-bg { opacity:0.3; transform:scale(1.05); }
.tool-item::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(10,5,20,0.7), rgba(20,10,35,0.4)); z-index:1; border-radius:20px; pointer-events:none; }
.tool-item:active { transform:scale(0.97); }
.tool-item:hover { border-color:rgba(168,85,247,0.4); box-shadow:0 18px 40px -10px rgba(168,85,247,0.5), inset 0 1.5px 0 rgba(255,255,255,0.3); }
.tool-icon { width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg, #a855f7, #ec4899); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 8px 20px rgba(168,85,247,0.5), inset 0 2px 0 rgba(255,255,255,0.4); position:relative; z-index:2; }
.tool-icon svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.tool-thumb { width:48px; height:48px; border-radius:14px; object-fit:cover; object-position:center; flex-shrink:0; border:2px solid rgba(255,255,255,0.35); box-shadow:0 6px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3); position:relative; z-index:2; transition:transform 0.25s, border-color 0.25s; }
.tool-item:hover .tool-thumb { transform:scale(1.08); border-color:rgba(168,85,247,0.8); }
.tool-info { flex:1; position:relative; z-index:2; }
.tool-name { font-size:15px; font-weight:800; margin-bottom:3px; letter-spacing:-0.3px; }
.tool-desc { font-size:11px; color:#b0a0c8; font-weight:500; }
.tool-arrow { color:#a855f7; font-size:24px; font-weight:300; position:relative; z-index:2; transition:transform 0.2s; }
.tool-item:hover .tool-arrow { transform:translateX(4px); }

/* EDITOR */
.editor-body { padding:20px; }
.upload-area { padding:70px 24px; border-radius:24px; border:2px dashed rgba(168,85,247,0.5); background:linear-gradient(135deg, rgba(168,85,247,0.12), rgba(236,72,153,0.06)); backdrop-filter:blur(20px); text-align:center; cursor:pointer; transition:all 0.3s; position:relative; overflow:hidden; }
.upload-area:hover { border-color:rgba(168,85,247,0.8); background:linear-gradient(135deg, rgba(168,85,247,0.2), rgba(236,72,153,0.1)); transform:translateY(-2px); box-shadow:0 20px 40px -10px rgba(168,85,247,0.4); }
.upload-area input { display:none; }
.upload-area svg { width:56px; height:56px; stroke:#a855f7; fill:none; stroke-width:1.5; margin-bottom:16px; position:relative; z-index:2; filter:drop-shadow(0 4px 12px rgba(168,85,247,0.5)); }
.upload-area p { font-size:18px; font-weight:800; margin-bottom:6px; position:relative; z-index:2; letter-spacing:-0.3px; }
.upload-area span { font-size:13px; color:#a99bc4; position:relative; z-index:2; }

.canvas-container { position:relative; display:inline-block; margin-bottom:20px; max-width:100%; }
.canvas-container canvas { max-width:100%; max-height:400px; border-radius:12px; display:block; box-shadow:0 10px 30px rgba(0,0,0,0.5); }
#overlayLayer { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.drag-item { position:absolute; cursor:move; user-select:none; pointer-events:auto; touch-action:none; }
.drag-item.text-item { font-weight:bold; white-space:nowrap; cursor:move; padding:4px 8px; }
.drag-item.sticker-item { font-size:60px; line-height:1; cursor:move; }

.control-label { font-size:12px; font-weight:800; color:#c0b0d8; margin:20px 0 12px; text-transform:uppercase; letter-spacing:2px; display:flex; align-items:center; gap:10px; }
.control-label::before { content:''; width:16px; height:2px; border-radius:2px; background:linear-gradient(90deg,#ff66cc,#a855f7); box-shadow:0 0 10px rgba(255,102,204,0.6); }
.control-row { display:flex; gap:10px; flex-wrap:wrap; }
.ctrl-btn { padding:12px 20px; border-radius:14px; background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)); backdrop-filter:blur(20px); border:1.5px solid rgba(255,255,255,0.12); color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:all 0.2s; box-shadow:0 6px 16px -4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); }
.ctrl-btn:active { transform:scale(0.95); }
.ctrl-btn:hover { background:linear-gradient(135deg, rgba(168,85,247,0.3), rgba(236,72,153,0.2)); border-color:rgba(168,85,247,0.5); box-shadow:0 10px 24px -6px rgba(168,85,247,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
.ctrl-btn.primary { background:linear-gradient(135deg, #ff0080, #a855f7); border:none; color:#fff; font-weight:800; box-shadow:0 10px 24px -6px rgba(255,0,128,0.5); }
.ctrl-btn.primary:hover { transform:translateY(-2px); box-shadow:0 14px 30px -6px rgba(255,0,128,0.6); }
.ctrl-btn.active { background:linear-gradient(135deg, #ff0080, #a855f7); border:none; color:#fff; font-weight:800; }

.manual-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.manual-input { flex:1; min-width:80px; padding:12px 16px; border-radius:12px; background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)); backdrop-filter:blur(20px); border:1.5px solid rgba(255,255,255,0.15); color:#fff; font-size:14px; font-weight:600; font-family:inherit; outline:none; transition:border-color 0.2s; }
.manual-input:focus { border-color:rgba(168,85,247,0.6); box-shadow:0 0 20px rgba(168,85,247,0.3); }
.manual-input::placeholder { color:#7a6d94; font-weight:500; }
.manual-sep { color:#a855f7; font-weight:900; font-size:18px; }
.manual-select { padding:12px 16px; border-radius:12px; background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)); backdrop-filter:blur(20px); border:1.5px solid rgba(255,255,255,0.15); color:#fff; font-size:14px; font-weight:700; font-family:inherit; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:16px; padding-right:38px; min-width:90px; }
.manual-select:focus { border-color:rgba(168,85,247,0.6); box-shadow:0 0 20px rgba(168,85,247,0.3); }
.manual-select option { background:#0a0a0f; color:#fff; }

/* STICKERS GRID */
.sticker-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin-bottom:16px; padding:12px; background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border-radius:16px; border:1.5px solid rgba(255,255,255,0.1); max-height:300px; overflow-y:auto; }
.sticker-btn { aspect-ratio:1; border-radius:12px; background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)); border:1.5px solid rgba(255,255,255,0.12); font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; font-family:inherit; padding:0; }
.sticker-btn:hover { background:linear-gradient(135deg, rgba(168,85,247,0.3), rgba(236,72,153,0.2)); border-color:rgba(168,85,247,0.5); transform:scale(1.1); }
.sticker-btn:active { transform:scale(0.95); }

/* COLOR PICKER ROW */
.color-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.color-swatch { width:36px; height:36px; border-radius:50%; cursor:pointer; border:2px solid rgba(255,255,255,0.3); transition:transform 0.2s; }
.color-swatch:hover { transform:scale(1.15); border-color:#fff; }
.color-swatch.active { border-color:#aaff00; box-shadow:0 0 12px #aaff00; }

/* FONT ROW */
.font-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:12px; scrollbar-width:none; }
.font-row::-webkit-scrollbar { display:none; }
.font-btn { flex:0 0 auto; padding:10px 16px; border-radius:12px; background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)); border:1.5px solid rgba(255,255,255,0.12); color:#fff; font-size:14px; cursor:pointer; transition:all 0.2s; font-family:inherit; white-space:nowrap; }
.font-btn:hover { background:linear-gradient(135deg, rgba(168,85,247,0.3), rgba(236,72,153,0.2)); border-color:rgba(168,85,247,0.5); }
.font-btn.active { background:linear-gradient(135deg, #ff0080, #a855f7); border-color:transparent; }

/* ACTION BTNS */
.action-btns { display:flex; gap:12px; margin-top:28px; }
.action-btn { flex:1; padding:18px; border-radius:18px; background:linear-gradient(135deg,#ff0080,#a855f7); border:none; color:#fff; font-size:15px; font-weight:900; cursor:pointer; font-family:inherit; letter-spacing:0.5px; box-shadow:0 16px 35px -10px rgba(255,0,128,0.6), inset 0 2px 0 rgba(255,255,255,0.3); transition:transform 0.15s; }
.action-btn:active { transform:scale(0.97); }
.action-btn.secondary { background:linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)); backdrop-filter:blur(20px); border:1.5px solid rgba(255,255,255,0.15); }

/* VIDEO PREVIEW */
.video-preview { width:100%; max-height:340px; border-radius:16px; margin-bottom:16px; background:#0a0a0f; box-shadow:0 10px 30px rgba(0,0,0,0.5); }
.processing-bar { padding:14px; background:linear-gradient(135deg, rgba(168,85,247,0.2), rgba(236,72,153,0.2)); border-radius:12px; text-align:center; margin-bottom:12px; color:#fff; font-weight:700; }

/* TOAST */
.toast { position:fixed; bottom:110px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#10b981,#059669); color:#fff; padding:14px 28px; border-radius:14px; font-size:14px; font-weight:700; z-index:2000; opacity:0; transition:opacity 0.3s; pointer-events:none; max-width:90%; text-align:center; }
.toast.show { opacity:1; }

::-webkit-scrollbar { width:0; height:0; }

/* PC LAYOUT */
@media (min-width: 900px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 40px 30px; }
  .category-card { min-height: 220px; }
  .cat-name { font-size: 18px; }
  .cat-desc { font-size: 13px; }
  .cat-badge { font-size: 11px; }
  .featured-scroll { padding: 6px 40px 24px; gap: 20px; }
  .feature-slide { flex: 0 0 42%; height: 260px; }
  .fs-title { font-size: 22px; }
  .fs-desc { font-size: 14px; }
  .fs-icon { width: 60px; height: 60px; }
  .fs-icon svg { width: 30px; height: 30px; }
  .header { padding: 16px 40px; gap: 20px; }
  .logo-camera { width: 66px; height: 66px; border-radius: 22px; }
  .camera-p { font-size: 34px; }
  .camera-svg { width: 42px; height: 42px; }
  .logo-text { height: 66px; }
  .logo-text .letter { font-size: clamp(40px, 4.5vw, 56px); }
  .logo-text .dot { font-size: clamp(48px, 5vw, 64px); }
  .anime-gif { height: 92px; width: auto; }
  .search-bar { margin: 20px 40px 0; padding: 16px 22px; }
  .search-bar input { font-size: 15px; }
  .hero { padding: 30px 40px 20px; }
  .hero-title { font-size: 42px; }
  .hero-sub { font-size: 15px; }
  .section-label { padding: 20px 40px 16px; font-size: 13px; }
  .pro-card { margin: 0 40px 30px; padding: 32px; }
  .pro-title { font-size: 28px; }
  .pro-desc { font-size: 15px; }
  .bottom-nav { left: 40px; right: 40px; max-width: 800px; margin: 0 auto; }
  .cat-page-header { padding: 20px 40px; }
  .cat-page-title { font-size: 26px; }
  .cat-page-hero { margin: 24px 40px; padding: 36px 32px; }
  .cat-hero-name { font-size: 36px; }
  .cat-hero-desc { font-size: 16px; }
  .tools-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px 40px 30px; }
  .tool-item { padding: 22px; }
  .tool-name { font-size: 17px; }
  .tool-desc { font-size: 13px; }
  .tool-icon { width: 54px; height: 54px; }
  .tool-icon svg { width: 26px; height: 26px; }
  .tool-thumb { width: 54px; height: 54px; }
  .editor-body { padding: 40px; max-width: 900px; margin: 0 auto; }
  .upload-area { padding: 100px 40px; }
  .upload-area svg { width: 72px; height: 72px; }
  .upload-area p { font-size: 20px; }
  .canvas-container canvas { max-height: 500px; }
  .cat-img { object-position: center 30%; }
  .feature-slide .bg-img { object-position: center; }
  .cat-thumb { width: 42px; height: 42px; }
  .cat-thumb:nth-child(2) { margin-left: -16px; }
  .cat-thumb:nth-child(3) { margin-left: -16px; }
  .sticker-grid { grid-template-columns: repeat(8, 1fr); gap: 10px; }
  .sticker-btn { font-size: 28px; }
}

/* ==================== CALCULATOR STYLES ==================== */
.calc-header {
  padding:22px; border-radius:22px; text-align:center;
  background:linear-gradient(135deg, rgba(168,85,247,0.2), rgba(236,72,153,0.15));
  border:1.5px solid rgba(255,255,255,0.15);
  margin-bottom:20px;
  box-shadow:0 15px 40px -15px rgba(168,85,247,0.4), inset 0 2px 0 rgba(255,255,255,0.15);
  position:relative; overflow:hidden;
}
.calc-header::before {
  content:''; position:absolute; top:-50%; right:-20%;
  width:60%; height:200%;
  background:radial-gradient(circle, rgba(255,102,204,0.2), transparent 60%);
  pointer-events:none;
}
.calc-icon { font-size:42px; margin-bottom:10px; position:relative; z-index:2; }
.calc-title { font-size:22px; font-weight:900; margin-bottom:4px; letter-spacing:-0.5px; position:relative; z-index:2; }
.calc-sub { font-size:12px; color:#a99bc4; position:relative; z-index:2; }
.calc-form { display:flex; flex-direction:column; gap:14px; }
.calc-field { display:flex; flex-direction:column; gap:6px; }
.calc-field label { font-size:12px; font-weight:700; color:#c0b0d8; text-transform:uppercase; letter-spacing:1px; }
.calc-input, .calc-select {
  padding:14px 16px; border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  backdrop-filter:blur(20px);
  border:1.5px solid rgba(255,255,255,0.15);
  color:#fff; font-size:15px; font-weight:600;
  font-family:inherit; outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
  width:100%;
}
.calc-input:focus, .calc-select:focus {
  border-color:rgba(168,85,247,0.6);
  box-shadow:0 0 20px rgba(168,85,247,0.3);
}
.calc-input::placeholder { color:#7a6d94; font-weight:500; }
.calc-select {
  cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  background-size:16px; padding-right:42px;
}
.calc-select option { background:#0a0a0f; color:#fff; }
.calc-btn {
  padding:16px 24px; border-radius:16px;
  background:linear-gradient(135deg,#ff0080,#a855f7);
  border:none; color:#fff; font-size:15px; font-weight:900;
  cursor:pointer; font-family:inherit; letter-spacing:0.5px;
  box-shadow:0 12px 30px rgba(255,0,128,0.5), inset 0 2px 0 rgba(255,255,255,0.3);
  transition:transform 0.15s;
}
.calc-btn:active { transform:scale(0.97); }
.calc-btn:hover { transform:translateY(-2px); }
.calc-btn-row { display:flex; gap:10px; }
.calc-btn-row .calc-btn { flex:1; }
.calc-result {
  display:none; padding:20px; margin-top:20px;
  background:linear-gradient(135deg, rgba(168,85,247,0.15), rgba(236,72,153,0.1));
  border:1.5px solid rgba(168,85,247,0.3);
  border-radius:18px;
}
.calc-result.show { display:block; animation:calcFadeIn 0.3s ease; }
.calc-result.error {
  background:linear-gradient(135deg, rgba(248,113,113,0.15), rgba(220,38,38,0.1));
  border-color:rgba(248,113,113,0.3);
  color:#fca5a5; font-weight:700;
}
@keyframes calcFadeIn {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
.result-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.08);
  font-size:14px;
}
.result-row:last-child { border-bottom:none; }
.result-row span { color:#a99bc4; font-weight:500; }
.result-row strong { font-size:16px; font-weight:900; color:#fff; }