/* ============================================================
   NovaCanvas AI — App CSS v2.0
   Dark Glassmorphism · Lensa/Prisma-inspired · Premium
   ============================================================ */

:root {
  --nc-primary:   #6C5CE7;
  --nc-primary-l: #A29BFE;
  --nc-accent:    #00CEFF;
  --nc-accent2:   #FF6B9D;
  --nc-gold:      #FFD700;
  --nc-green:     #00FFA3;
  --nc-dark:      #08081A;
  --nc-dark2:     #10102A;
  --nc-dark3:     #18183A;
  --nc-glass:     rgba(255,255,255,.04);
  --nc-glass-b:   rgba(255,255,255,.09);
  --nc-text:      #FFFFFF;
  --nc-muted:     rgba(255,255,255,.55);
  --nc-r:         20px;
  --nc-r-sm:      12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── App wrapper ─────────────────────────────────────────── */
.nc-ai-app {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--nc-dark);
  color: var(--nc-text);
  min-height: 85vh;
  overflow-x: hidden;
  position: relative;
  overflow: hidden;
  border-radius: var(--nc-r);
}

/* ── Animated background ─────────────────────────────────── */
.nc-bg { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.nc-orb {
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.22;
  animation: ncOrb 24s ease-in-out infinite;
}
.nc-orb.o1{width:550px;height:550px;background:var(--nc-primary);top:-180px;left:-180px;}
.nc-orb.o2{width:420px;height:420px;background:var(--nc-accent);top:45%;right:-120px;animation-delay:-8s;}
.nc-orb.o3{width:360px;height:360px;background:var(--nc-accent2);bottom:-100px;left:28%;animation-delay:-16s;}
.nc-orb.o4{width:300px;height:300px;background:var(--nc-gold);top:22%;left:52%;opacity:.1;animation-delay:-12s;}
.nc-grid {
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:60px 60px;
}

/* ── Inner ───────────────────────────────────────────────── */
.nc-inner { position:relative; z-index:1; padding:28px 28px 60px; }

/* ── Credit badge (lives inside brand header since v2.4.5) ── */
.nc-credit-badge {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px;
  background: linear-gradient(135deg, rgba(20,18,32,0.85) 0%, rgba(30,22,42,0.85) 100%);
  border:1px solid rgba(255,215,0,0.28);
  border-radius:50px;
  font-size:13px; font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:all .22s ease;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  white-space:nowrap;
  flex-shrink:0;
}
.nc-credit-badge:hover {
  border-color:var(--nc-gold);
  box-shadow: 0 6px 22px rgba(255,215,0,0.28);
  transform: translateY(-1px);
}
.nc-cval {
  font-size:17px; font-weight:900;
  background:linear-gradient(135deg,var(--nc-gold),#FFA500);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.nc-cmuted    { color: rgba(255,255,255,0.75); font-size:11px; font-weight:600; }
.nc-crecharge { color:#FFD700; font-size:11px; font-weight:700; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
@media(max-width:640px) {
  .nc-credit-badge { padding:6px 12px; font-size:12px; gap:5px; }
  .nc-cval         { font-size:15px; }
  .nc-cmuted       { display:none; }   /* "crédits" label hidden on mobile to save space */
}
@media(max-width:380px) {
  .nc-crecharge { display:none; }      /* keep only ⚡ N on very small screens */
}

/* ── Card ────────────────────────────────────────────────── */
.nc-card {
  background:var(--nc-glass); border:1px solid var(--nc-glass-b);
  border-radius:var(--nc-r); backdrop-filter:blur(16px); padding:24px;
}

/* ── Hero ────────────────────────────────────────────────── */
.nc-hero {
  text-align:center; padding:50px 20px 30px; max-width:700px; margin:0 auto;
}
.nc-hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 20px; background:var(--nc-glass);
  border:1px solid var(--nc-glass-b); border-radius:50px;
  font-size:12px; font-weight:600; color:var(--nc-accent);
  margin-bottom:22px;
}
.nc-pulse-dot {
  width:8px; height:8px; background:var(--nc-green); border-radius:50%;
  animation:ncPulseD 2s ease-in-out infinite;
}
.nc-hero-title {
  font-size:clamp(30px,5.5vw,58px); font-weight:900; line-height:1.1;
  margin-bottom:14px; letter-spacing:-.5px;
  color:var(--nc-text);
}
/* Force heading colors so the active WP theme can't dim them. */
.nc-ai-app .nc-hero-title,
.nc-ai-app .nc-section-title { color:var(--nc-text); }
.nc-gtext {
  background:linear-gradient(135deg,var(--nc-accent),var(--nc-primary-l),var(--nc-accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-size:200% auto; animation:ncShimmer 4s linear infinite;
}
.nc-hero-sub { font-size:16px; color:var(--nc-muted); max-width:500px; margin:0 auto 24px; line-height:1.6; }
.nc-hero-stats { display:flex; justify-content:center; gap:32px; }
.nc-hstat { text-align:center; }
.nc-hstat-val { font-size:26px; font-weight:900; background:linear-gradient(135deg,var(--nc-accent),var(--nc-primary-l)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.nc-hstat-lbl { font-size:11px; color:var(--nc-muted); text-transform:uppercase; letter-spacing:.8px; margin-top:3px; }

/* ── Upload bar / hero ───────────────────────────────────── */
.nc-upload-hero {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:20px 24px; margin-bottom:28px;
  border:2px dashed rgba(108,92,231,.35);
  cursor:pointer; transition:all .4s;
}
.nc-upload-hero:hover, .nc-upload-hero.drag-over {
  border-color:var(--nc-primary);
  box-shadow:0 0 40px rgba(108,92,231,.15);
}
.nc-upload-hero-icon { font-size:38px; animation:ncFloat 3.5s ease-in-out infinite; flex-shrink:0; }
.nc-upload-hero-text { flex:1; min-width:180px; }
.nc-upload-hero-text strong { font-size:15px; font-weight:700; display:block; margin-bottom:4px; }
.nc-upload-hero-text span   { font-size:12px; color:var(--nc-muted); }

.nc-upload-bar {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 20px; margin-bottom:24px;
}
.nc-bar-thumb { width:56px; height:56px; border-radius:12px; object-fit:cover; border:2px solid var(--nc-glass-b); flex-shrink:0; }
.nc-bar-info  { flex:1; min-width:120px; }
.nc-bar-name  { font-size:14px; font-weight:600; }
.nc-bar-dim   { font-size:11px; color:var(--nc-muted); }
.nc-bar-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.nc-bar-hint { font-size:12px; color:var(--nc-muted); }

/* ── Context bar ─────────────────────────────────────────── */
.nc-ctx-bar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 18px; margin-bottom:20px;
  background:var(--nc-glass); border:1px solid var(--nc-glass-b); border-radius:var(--nc-r-sm);
}
.nc-ctx-lbl { font-size:12px; color:var(--nc-muted); }
.nc-ctx-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 14px; border-radius:30px;
  font-size:12px; font-weight:600;
}
.nc-ctx-chip.effect { background:rgba(108,92,231,.15); border:1px solid rgba(108,92,231,.3); }
.nc-ctx-chip.style  { background:rgba(0,206,255,.1);   border:1px solid rgba(0,206,255,.25); }
.nc-ctx-img { width:20px; height:20px; border-radius:4px; object-fit:cover; }
.nc-btn-link { background:none; border:none; color:var(--nc-muted); font-size:12px; cursor:pointer; padding:4px 8px; border-radius:6px; transition:all .2s; }
.nc-btn-link:hover { color:var(--nc-accent2); background:rgba(255,107,157,.08); }

/* ── Section ─────────────────────────────────────────────── */
.nc-section { margin-bottom: 48px; }
.nc-section-hd { text-align:center; margin-bottom:28px; }
.nc-section-title { font-size:clamp(18px,3vw,26px); font-weight:900; margin-bottom:6px; }
.nc-section-sub   { font-size:13px; color:var(--nc-muted); }

/* ── Effects grid (Prisma-style large cards) ─────────────── */
.nc-effects-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:18px;
}
.nc-effect-card {
  position:relative; border-radius:var(--nc-r);
  border:2px solid rgba(255,255,255,.07);
  background:var(--nc-glass); overflow:hidden;
  cursor:pointer; transition:all .3s;
  --ec: linear-gradient(135deg,#6C5CE7,#00CEFF);
}
.nc-effect-card:hover  { transform:translateY(-5px); border-color:rgba(255,255,255,.2); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.nc-effect-card.active { border-color:var(--nc-primary); box-shadow:0 0 40px rgba(108,92,231,.25); }
.nc-effect-card.signature { border-color:rgba(255,215,0,.2); }
.nc-effect-card.signature:hover  { border-color:rgba(255,215,0,.5); box-shadow:0 20px 50px rgba(255,215,0,.12); }
.nc-effect-card.signature.active { border-color:var(--nc-gold); box-shadow:0 0 40px rgba(255,215,0,.2); }

.nc-effect-art {
  position:relative; height:130px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.nc-effect-art-bg {
  position:absolute; inset:-20px;
  background:var(--ec); opacity:.85;
  filter:blur(2px);
  transition:transform .4s;
}
.nc-effect-card:hover .nc-effect-art-bg { transform:scale(1.08); }

/* Photo thumbnail inside effect card */
.nc-effect-art-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  z-index:1;
  opacity:.82;
  transition:transform .45s ease, opacity .3s;
}
.nc-effect-card:hover .nc-effect-art-img { transform:scale(1.07); opacity:.95; }
/* Semi-transparent colour veil — preserves the palette identity of each effect */
.nc-effect-art-veil {
  position:absolute; inset:0; z-index:2;
  background:var(--ec);
  opacity:.28;
  mix-blend-mode:color;
  transition:opacity .3s;
}
.nc-effect-card:hover .nc-effect-art-veil { opacity:.18; }
/* Bottom fade so text/emoji floats cleanly */
.nc-effect-art::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:52px;
  background:linear-gradient(transparent, rgba(8,8,26,.72));
  z-index:3; pointer-events:none;
}

.nc-effect-art-emoji {
  position:relative; z-index:4;
  font-size:52px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.55));
  transition:transform .3s;
}
.nc-effect-card:hover .nc-effect-art-emoji { transform:scale(1.12); }
.nc-effect-check {
  position:absolute; top:10px; right:10px; z-index:5;
  width:28px; height:28px; background:var(--nc-green);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900; color:#000;
  box-shadow:0 0 12px rgba(0,255,163,.4);
}
.nc-signature-badge {
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:10px; font-weight:800; letter-spacing:.5px;
  padding:3px 8px; border-radius:20px;
  background:linear-gradient(135deg,var(--nc-gold),#FFA500); color:#000;
}
.nc-effect-body { padding:14px 16px 16px; }
.nc-effect-name { font-size:14px; font-weight:800; margin-bottom:5px; }
.nc-effect-desc { font-size:11px; color:var(--nc-muted); line-height:1.5; margin-bottom:12px; }
.nc-effect-footer { display:flex; align-items:center; justify-content:space-between; }
.nc-cred-chip {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 9px; border-radius:20px;
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.2);
  font-size:11px; font-weight:700; color:var(--nc-gold);
}
.nc-effect-cta {
  font-size:11px !important; padding:6px 14px !important;
  border-radius:8px !important;
}

/* ── Style-copy grid (same dimensions as effects) ────────── */
.nc-style-scroll {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
  gap:18px;
}
.nc-style-card {
  text-align:center;
  cursor:pointer; transition:all .3s;
  border-radius:var(--nc-r);
  border:2px solid rgba(255,255,255,.07);
  background:var(--nc-glass);
  overflow:hidden;
}
.nc-style-card:hover  { border-color:rgba(255,255,255,.2); transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.35); }
.nc-style-card.active { border-color:var(--nc-accent); box-shadow:0 0 24px rgba(0,206,255,.2); }
.nc-style-img-wrap {
  position:relative; width:100%; height:130px;
  overflow:hidden;
}
.nc-style-img-wrap img { width:100%; height:100%; object-fit:cover; }
.nc-style-check {
  position:absolute; top:6px; right:6px;
  width:22px; height:22px; background:var(--nc-accent);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; color:#000;
}
.nc-style-body { padding:14px 16px 16px; }
.nc-style-name { font-size:14px; font-weight:800; margin-bottom:4px; }
.nc-style-cat  { font-size:11px; color:var(--nc-muted); margin-bottom:8px; }

/* ── Community gallery ──────────────────────────────────── */
.nc-gallery-section { margin-bottom:0; }

/* Toolbar: filters + layout controls */
.nc-gallery-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:20px;
}
.nc-gallery-filters {
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:thin; scrollbar-color:var(--nc-primary) transparent;
  -webkit-overflow-scrolling:touch; flex:1; min-width:0;
}
.nc-gallery-filters::-webkit-scrollbar { height:3px; }
.nc-gallery-filters::-webkit-scrollbar-track { background:transparent; }
.nc-gallery-filters::-webkit-scrollbar-thumb { background:var(--nc-primary); border-radius:10px; }
.nc-gf-chip {
  flex-shrink:0; padding:6px 16px; border-radius:20px; border:1px solid var(--nc-glass-b);
  background:var(--nc-glass); color:var(--nc-muted); font-size:12px; font-weight:600;
  cursor:pointer; transition:all .25s; white-space:nowrap;
}
.nc-gf-chip:hover { border-color:var(--nc-primary); color:#fff; }
.nc-gf-chip.active {
  background:var(--nc-primary); border-color:var(--nc-primary); color:#fff;
  box-shadow:0 2px 12px rgba(108,92,231,.35);
}
.nc-gallery-controls {
  display:flex; gap:4px; flex-shrink:0;
}
.nc-gc-btn {
  width:32px; height:32px; border-radius:8px; border:1px solid var(--nc-glass-b);
  background:var(--nc-glass); color:var(--nc-muted); font-size:14px;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.nc-gc-btn:hover { border-color:var(--nc-primary); color:#fff; }
.nc-gc-btn.active { background:var(--nc-primary); border-color:var(--nc-primary); color:#fff; }
@media(max-width:480px) {
  .nc-gallery-toolbar { flex-direction:column; align-items:stretch; }
  .nc-gallery-controls { justify-content:flex-end; }
}

/* ▦ Masonry (default) — 3 cols, natural height with max cap */
.nc-gallery-grid.nc-layout-masonry {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
.nc-layout-masonry .nc-gallery-img-wrap { overflow:hidden; }
.nc-layout-masonry .nc-gallery-img-wrap img { aspect-ratio:4/5; object-fit:cover; }
@media(max-width:768px) { .nc-gallery-grid.nc-layout-masonry { grid-template-columns:repeat(2, 1fr); } }
@media(max-width:480px) { .nc-gallery-grid.nc-layout-masonry { grid-template-columns:repeat(2, 1fr); gap:10px; } }

/* ▣ Large grid — 2 cols, portrait ratio (like Instagram portrait) */
.nc-gallery-grid.nc-layout-grid-lg {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
}
.nc-layout-grid-lg .nc-gallery-img-wrap img { aspect-ratio:3/4; object-fit:cover; }
@media(max-width:480px) { .nc-gallery-grid.nc-layout-grid-lg { grid-template-columns:1fr; } }

/* ▤ Small grid — 4 cols desktop, square thumbnails */
.nc-gallery-grid.nc-layout-grid-sm {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
}
.nc-layout-grid-sm .nc-gallery-img-wrap img { aspect-ratio:1/1; object-fit:cover; }
.nc-layout-grid-sm .nc-gallery-meta { padding:4px 8px; }
.nc-layout-grid-sm .nc-gallery-author { font-size:10px; }
.nc-layout-grid-sm .nc-gallery-time { font-size:9px; }
@media(max-width:768px) { .nc-gallery-grid.nc-layout-grid-sm { grid-template-columns:repeat(3, 1fr); } }
@media(max-width:480px) { .nc-gallery-grid.nc-layout-grid-sm { grid-template-columns:repeat(3, 1fr); gap:6px; } }

/* Gallery cards */
.nc-gallery-card {
  border-radius:var(--nc-r-sm); overflow:hidden;
  background:var(--nc-dark2); cursor:pointer;
  transition:transform .3s, box-shadow .3s;
}
.nc-gallery-card:hover { transform:scale(1.02); box-shadow:0 8px 30px rgba(108,92,231,.2); }
.nc-gallery-img-wrap { position:relative; }
.nc-gallery-img-wrap img { width:100%; display:block; }
.nc-gallery-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 50%);
  opacity:0; transition:opacity .3s;
  display:flex; flex-direction:column; justify-content:flex-end; padding:10px;
}
.nc-gallery-card:hover .nc-gallery-overlay { opacity:1; }
.nc-gallery-effect { font-size:11px; font-weight:600; color:rgba(255,255,255,.8); margin-bottom:6px; }
.nc-gallery-actions { display:flex; gap:8px; }
.nc-gallery-btn {
  padding:4px 10px; border-radius:20px; border:none;
  font-size:11px; font-weight:700; cursor:pointer;
  background:rgba(255,255,255,.15); color:#fff;
  backdrop-filter:blur(8px); transition:all .2s;
}
.nc-gallery-btn:hover { background:rgba(255,255,255,.3); }
.nc-del-btn:hover { background:rgba(255,107,157,.4) !important; }

/* v2.6.4: 📘 Facebook share button on gallery cards */
.nc-fbshare-btn {
  background:rgba(24,119,242,.22) !important;
  color:#fff !important;
  border:1px solid rgba(24,119,242,.5) !important;
  padding:4px 9px !important;
  font-size:12px !important;
  line-height:1 !important;
}
.nc-fbshare-btn:hover {
  background:#1877F2 !important;
  border-color:#1877F2 !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(24,119,242,.45);
}

/* v2.6.4: 📘 Facebook share button inside the lightbox */
.nc-lb-fbshare {
  display:inline-flex; align-items:center; gap:2px;
  background:rgba(24,119,242,.12); color:#fff;
  border:1px solid rgba(24,119,242,.5);
  transition:all .2s;
}
.nc-lb-fbshare:hover {
  background:#1877F2; border-color:#1877F2;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(24,119,242,.4);
}
.nc-lb-fbshare:hover span { color:#fff !important; }

/* ── 🎭 REMIX pill on thumbnails ─────────────────────────── */
.nc-remix-pill {
  position:absolute; top:8px; right:8px; z-index:3;
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 10px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#6C5CE7,#FF6B9D);
  color:#fff; font-weight:800; font-size:11px; letter-spacing:.3px;
  border-radius:999px; backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(108,92,231,.45),
             0 0 0 1.5px rgba(255,255,255,.35) inset;
  transform:translateY(0);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s, filter .2s;
  animation:ncRemixIdle 3.4s ease-in-out infinite;
}
.nc-remix-pill:hover {
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 10px 28px rgba(255,107,157,.55),
             0 0 0 1.5px rgba(255,255,255,.5) inset;
  filter:brightness(1.08);
  animation:none;
}
.nc-remix-pill:active { transform:translateY(0) scale(.96); }
.nc-remix-pill-ico { font-size:13px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.nc-remix-pill-txt { font-size:11px; }
.nc-remix-pill-cost {
  background:rgba(0,0,0,.25); padding:1px 6px; border-radius:999px;
  font-size:10px; font-weight:700;
}
.nc-remix-pill.nc-remix-clicked {
  animation:ncRemixPop .38s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes ncRemixIdle {
  0%,100% { box-shadow:0 6px 18px rgba(108,92,231,.45), 0 0 0 1.5px rgba(255,255,255,.35) inset; }
  50%     { box-shadow:0 8px 22px rgba(255,107,157,.55), 0 0 0 1.5px rgba(255,255,255,.5) inset; }
}
@keyframes ncRemixPop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.22) rotate(-4deg); }
  70%  { transform:scale(.94) rotate(2deg); }
  100% { transform:scale(1); }
}
@media(max-width:520px) {
  .nc-remix-pill { top:6px; right:6px; padding:5px 8px; font-size:10px; gap:4px; }
  .nc-remix-pill-txt { display:none; }
  .nc-remix-pill-cost { font-size:9px; padding:0 5px; }
}
.nc-gallery-meta {
  padding:8px 12px; display:flex; align-items:center; justify-content:space-between;
}
.nc-gallery-author { font-size:11px; color:var(--nc-muted); }
.nc-gallery-stats { display:flex; align-items:center; gap:8px; }
.nc-gallery-views { font-size:10px; color:var(--nc-muted); opacity:.7; }
.nc-gallery-time { font-size:10px; color:var(--nc-muted); opacity:.6; }
.nc-gallery-empty {
  text-align:center; padding:60px 20px;
  background:var(--nc-glass); border-radius:var(--nc-r);
  border:1px dashed var(--nc-glass-b);
}
.nc-gallery-empty span { font-size:52px; display:block; margin-bottom:16px; }
.nc-gallery-empty p { color:var(--nc-muted); font-size:14px; line-height:1.6; }

/* ── Centered view (processing, order) ──────────────────── */
.nc-center-view {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  min-height:400px; padding:60px 20px;
}

/* ── Processing rings ────────────────────────────────────── */
.nc-proc-rings {
  position:relative; width:160px; height:160px; margin-bottom:32px;
}
.nc-ring {
  position:absolute; inset:0;
  border:3px solid transparent; border-radius:50%;
}
.nc-ring.r1{border-top-color:var(--nc-accent);   animation:ncSpin 1.6s linear infinite;}
.nc-ring.r2{inset:14px;border-right-color:var(--nc-primary); animation:ncSpin 2.1s linear infinite reverse;}
.nc-ring.r3{inset:28px;border-bottom-color:var(--nc-accent2);animation:ncSpin 1.1s linear infinite;}
.nc-ring.r4{inset:42px;border-left-color:var(--nc-gold);     animation:ncSpin 2.8s linear infinite reverse;}
.nc-ring-center {
  position:absolute; inset:56px;
  background:linear-gradient(135deg,var(--nc-primary),var(--nc-accent));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:26px; animation:ncPulseGlow 1.8s ease-in-out infinite;
}
.nc-proc-title  { font-size:20px; font-weight:700; margin-bottom:8px; }
.nc-proc-sub    { font-size:13px; color:var(--nc-muted); margin-bottom:22px; }
.nc-progress-bar{
  width:360px; max-width:90vw; height:8px;
  background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; margin-bottom:10px;
}
.nc-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--nc-accent),var(--nc-primary),var(--nc-accent2));
  background-size:200% auto; border-radius:4px;
  transition:width .4s ease; animation:ncShimmer 2s linear infinite;
}
.nc-proc-pct    { font-size:16px; font-weight:700; color:var(--nc-primary-l); }
.nc-proc-effect { margin-top:16px; font-size:12px; color:var(--nc-muted); }

/* ── Preview / compare ───────────────────────────────────── */
.nc-preview-section { max-width:900px; margin:0 auto; }
.nc-compare-wrap img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
}
.nc-cmp-after { clip-path:inset(0 50% 0 0); }
.nc-cmp-handle {
  position:absolute; top:0; left:50%; width:4px; height:100%;
  background:#fff; transform:translateX(-50%); z-index:5;
  box-shadow:0 0 12px rgba(0,0,0,.5);
}
.nc-cmp-handle::after {
  content:'⟨⟩'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#000; font-size:16px; font-weight:700;
  box-shadow:0 4px 20px rgba(0,0,0,.3); letter-spacing:3px;
}
.nc-cmp-label {
  position:absolute; top:14px; z-index:4;
  padding:5px 12px; background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px); border-radius:8px;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px;
}
.nc-cmp-label.before { left:14px; }
.nc-cmp-label.after  { right:14px; }

/* ── Share toggle ────────────────────────────────────────── */
.nc-share-toggle { padding:16px 20px; margin-bottom:20px; }
.nc-toggle-wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nc-switch { position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; }
.nc-switch input { opacity:0; width:0; height:0; }
.nc-slider {
  position:absolute; inset:0; cursor:pointer;
  background:rgba(255,255,255,.1); border-radius:13px; transition:.3s;
}
.nc-slider::before {
  content:''; position:absolute; height:20px; width:20px;
  left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s;
}
.nc-switch input:checked + .nc-slider { background:var(--nc-primary); }
.nc-switch input:checked + .nc-slider::before { transform:translateX(20px); }

/* ── Format selection modal ──────────────────────────────── */
.nc-fmt-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px;
  margin-bottom:24px;
}
.nc-fmt-card {
  padding:16px 12px; border-radius:var(--nc-r-sm); text-align:center;
  cursor:pointer; transition:all .3s;
  background:var(--nc-glass); border:2px solid rgba(255,255,255,.07);
}
.nc-fmt-card:hover  { border-color:rgba(255,255,255,.2); transform:translateY(-3px); }
.nc-fmt-card.active { border-color:var(--nc-accent); background:rgba(0,206,255,.07); box-shadow:0 0 24px rgba(0,206,255,.15); }
.nc-fmt-visual {
  background:rgba(255,255,255,.07); border-radius:5px;
  margin:0 auto 12px; border:1px solid rgba(255,255,255,.1);
}
.nc-fmt-sz    { font-size:16px; font-weight:800; background:linear-gradient(135deg,var(--nc-accent),var(--nc-primary-l)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.nc-fmt-name  { font-size:11px; font-weight:600; margin-top:4px; color:var(--nc-text); }
.nc-fmt-price { font-size:13px; font-weight:700; color:var(--nc-gold); margin-top:5px; }
.nc-fmt-stock { font-size:10px; font-weight:700; margin-top:5px; color:var(--nc-green); }
.nc-fmt-stock.low { color:var(--nc-accent2); }
.nc-modal-footer { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:4px; }
.nc-modal-wide { max-width:860px; }

/* ── Modals ──────────────────────────────────────────────── */
.nc-modal-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(8,8,26,.9); backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; animation:ncFadeIn .3s ease;
}
.nc-modal {
  background:var(--nc-dark3); border:1px solid var(--nc-glass-b);
  border-radius:28px; padding:40px 36px;
  width:100%; max-width:680px; max-height:90vh; overflow-y:auto;
  position:relative; animation:ncSlideUp .4s ease;
}
/* Close button — FIXED positioning so it always stays in the viewport
   corner, even when the modal body scrolls on mobile. Previously it was
   position:absolute inside a scrollable .nc-modal, so scrolling the
   packages grid sent it off-screen and clicks landed on content below. */
.nc-modal-close {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 14px));
  right: max(14px, env(safe-area-inset-right, 14px));
  width: 40px; height: 40px;
  background: rgba(20,14,30,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .22s ease;
  z-index: 10010;              /* above .nc-modal-overlay (9999) */
  pointer-events: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nc-modal-close:hover,
.nc-modal-close:focus-visible {
  background: rgba(255,107,157,0.22);
  border-color: rgba(255,107,157,0.55);
  color: var(--nc-accent2);
  transform: scale(1.05);
  outline: none;
}
.nc-modal-close:active { transform: scale(0.92); }
.nc-modal-title { font-size:24px; font-weight:800; margin-bottom:6px; text-align:center; color:var(--nc-text); }
.nc-modal-sub   { font-size:13px; color:var(--nc-muted); text-align:center; margin-bottom:28px; }
/* Guard against theme rules dimming any modal text (headings, labels, etc.). */
.nc-modal-overlay, .nc-modal-overlay * { color:var(--nc-text); }
.nc-modal-overlay .nc-muted,
.nc-modal-overlay [class*="-muted"] { color:var(--nc-muted); }
.nc-modal-overlay .nc-fmt-price { color:var(--nc-gold); }
.nc-modal-overlay .nc-fmt-stock { color:var(--nc-green); }
.nc-modal-overlay .nc-fmt-stock.low { color:var(--nc-accent2); }
.nc-modal-overlay .nc-fmt-sz,
.nc-modal-overlay .nc-gtext { color:transparent; }

/* ── Credit packages ─────────────────────────────────────── */
.nc-packages-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px;
}
.nc-pkg-card {
  position:relative; padding:22px 16px; border-radius:18px;
  border:2px solid rgba(255,255,255,.07); background:var(--nc-glass);
  text-align:center; cursor:pointer; transition:all .3s; overflow:hidden;
}
.nc-pkg-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--pc,var(--nc-primary)); }
.nc-pkg-card:hover   { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.3); border-color:rgba(255,255,255,.15); }
.nc-pkg-card.featured{ border-color:var(--pc,var(--nc-primary)); box-shadow:0 0 30px rgba(108,92,231,.2); }
.nc-pkg-badge { position:absolute; top:12px; right:12px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:2px 7px; border-radius:10px; background:linear-gradient(135deg,var(--nc-accent2),var(--nc-primary)); color:#fff; }
.nc-pkg-icon    { font-size:30px; margin-bottom:10px; display:block; }
.nc-pkg-name    { font-size:13px; font-weight:700; margin-bottom:8px; }
.nc-pkg-credits { font-size:30px; font-weight:900; color:var(--pc,var(--nc-primary)); line-height:1; }
.nc-pkg-label   { font-size:10px; color:var(--nc-muted); margin-top:2px; }
.nc-pkg-bonus   { font-size:11px; color:var(--nc-green); margin-top:4px; }
.nc-pkg-price   { font-size:19px; font-weight:800; margin-top:10px; background:linear-gradient(135deg,#fff,var(--nc-primary-l)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.nc-pkg-ppu     { font-size:10px; color:var(--nc-muted); margin-top:2px; }

/* ── v2.6.7 — Annual / Mensuel period tabs inside credits modal ── */
.nc-period-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  background: rgba(255,255,255,.04);
  padding: 6px; border-radius: 16px;
  margin: 0 0 18px;
}
.nc-period-tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 12px 10px;
  background: transparent; border: none; border-radius: 12px;
  color: var(--nc-muted); cursor: pointer;
  transition: all .22s ease; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.nc-period-tab:hover:not(.is-active) { background: rgba(255,255,255,.04); color: var(--nc-text); }
.nc-period-tab.is-active {
  background: linear-gradient(135deg, var(--nc-primary), var(--nc-accent2));
  color: #fff; box-shadow: 0 6px 18px rgba(108,92,231,.35);
}
.nc-period-tab[data-period="annual"].is-active {
  background: linear-gradient(135deg, #FFD93D, #FF6B9D);
  box-shadow: 0 6px 18px rgba(255,107,157,.4); color: #1a1020;
}
.nc-period-ico   { font-size: 18px; line-height: 1; }
.nc-period-label { font-size: 13px; font-weight: 800; letter-spacing: .3px; }
.nc-period-hint  { font-size: 10px; opacity: .75; font-weight: 600; }

.nc-period-panel { display: none; animation: ncFadeIn .25s ease both; }
.nc-period-panel.is-active { display: block; }
@keyframes ncFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

.nc-annual-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin: 0 0 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,217,61,.14), rgba(255,107,157,.14));
  border: 1px solid rgba(255,217,61,.25);
}
.nc-annual-hero-ico   { font-size: 32px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(255,217,61,.4)); }
.nc-annual-hero-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.nc-annual-hero-sub   { font-size: 12px; color: var(--nc-muted); line-height: 1.45; }

.nc-pkg-card.annual {
  border-color: rgba(255,217,61,.35);
  background: linear-gradient(180deg, rgba(255,217,61,.06), rgba(255,255,255,.02));
}
.nc-pkg-card.annual::before {
  background: linear-gradient(90deg, #FFD93D, #FF6B9D, #6C5CE7);
}
.nc-pkg-card.annual:hover { box-shadow: 0 18px 42px rgba(255,107,157,.25); }
.nc-pkg-period-badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 10px;
  background: rgba(255,217,61,.15); color: #FFD93D;
  border: 1px solid rgba(255,217,61,.35);
}
.nc-pkg-save {
  margin-top: 8px;
  display: inline-block;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff; text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(16,185,129,.35);
}

/* Loyalty chip — shown above the package grid once the user has
   purchased at least once this year. Subtle, not loud. */
.nc-loyalty-chip {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px;
  margin: 0 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,217,61,.12), rgba(108,92,231,.12));
  border: 1px solid rgba(255,217,61,.25);
  font-size: 12px; color: var(--nc-text);
}
.nc-loyalty-chip strong { color: #FFD93D; font-weight: 800; }
.nc-loyalty-ico  { font-size: 15px; line-height: 1; }
.nc-loyalty-sep  { opacity: .4; }

@media (max-width: 480px) {
  .nc-annual-hero { flex-direction: column; text-align: center; }
  .nc-period-hint { display: none; }
}

/* ── Credits modal — tabs & rewards (v2.6.2) ─────────────── */
.nc-credit-cluster {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.nc-rewards-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: linear-gradient(135deg, #FF6B9D, #FFD93D);
  color: #1a1020;
  font-size: 12px; font-weight: 800;
  border: none; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,107,157,0.35);
  animation: ncRewardsPulse 3s ease-in-out infinite;
  transition: transform .22s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.nc-rewards-chip:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 20px rgba(255,107,157,0.55); }
.nc-rewards-chip:active { transform: scale(0.96); }
.nc-rewards-chip-ico { font-size: 14px; line-height: 1; }
@keyframes ncRewardsPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(255,107,157,0.35); }
  50%      { box-shadow: 0 4px 20px rgba(255,217,61,0.55); }
}
@media(max-width:480px) {
  .nc-rewards-chip-txt { display: none; }
  .nc-rewards-chip { padding: 7px 9px; }
}

.nc-credits-hero {
  text-align: center;
  margin-bottom: 18px;
}
.nc-credits-bolt {
  font-size: 52px;
  margin-bottom: 10px;
  animation: ncFloat 3s ease-in-out infinite;
}
.nc-credits-tabs {
  display: flex;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  padding: 5px;
  border-radius: 14px;
  margin-bottom: 20px;
}
.nc-credits-tab {
  flex: 1;
  padding: 11px 14px;
  background: transparent;
  border: none;
  color: var(--nc-muted);
  font-size: 14px; font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: all .22s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
.nc-credits-tab:hover:not(.is-active) { color: var(--nc-text); background: rgba(255,255,255,0.04); }
.nc-credits-tab.is-active {
  background: linear-gradient(135deg, var(--nc-primary), var(--nc-accent2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(108,92,231,0.35);
}
.nc-credits-tab-free {
  font-size: 9px; font-weight: 900;
  padding: 2px 6px; border-radius: 6px;
  background: var(--nc-gold); color: #1a1020;
  letter-spacing: 0.4px;
}
.nc-credits-panels > .nc-credits-panel { display: none; }
.nc-credits-panels > .nc-credits-panel.is-active { display: block; animation: ncFadeIn .25s ease; }
.nc-credits-footnote {
  margin-top: 18px;
  padding: 10px 14px;
  font-size: 11px;
  color: var(--nc-muted);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Rewards list */
.nc-rewards-intro {
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255,107,157,0.12), rgba(255,217,61,0.08));
  border: 1px solid rgba(255,107,157,0.22);
  border-radius: 12px;
  font-size: 13px;
  color: #fff;
  margin-bottom: 16px;
  text-align: center;
}
.nc-rewards-list { display: grid; gap: 10px; }
.nc-reward-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  transition: all .25s ease;
}
.nc-reward-card:hover:not(.is-locked) {
  border-color: rgba(255,217,61,0.35);
  background: rgba(255,217,61,0.04);
}
.nc-reward-card.is-locked { opacity: 0.55; }
.nc-reward-card.is-passive { border-style: dashed; }
.nc-reward-ico {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
}
.nc-reward-title { font-size: 14px; font-weight: 700; color: var(--nc-text); margin-bottom: 2px; }
.nc-reward-desc  { font-size: 12px; color: var(--nc-muted); line-height: 1.4; }
.nc-reward-meta {
  margin-top: 6px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 11px;
}
.nc-reward-credits {
  background: var(--nc-gold); color: #1a1020;
  padding: 2px 8px; border-radius: 6px; font-weight: 800;
}
.nc-reward-cap { color: var(--nc-muted); }
.nc-reward-action { white-space: nowrap; }
.nc-reward-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--nc-primary), var(--nc-accent2));
  color: #fff;
  border: none; border-radius: 10px;
  font-size: 12px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.nc-reward-btn:hover:not(.is-disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(108,92,231,0.4); }
.nc-reward-btn.is-disabled {
  background: rgba(255,255,255,0.08);
  color: var(--nc-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.nc-rewards-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--nc-muted);
  font-size: 14px;
}
.nc-rewards-empty {
  padding: 40px 20px;
  text-align: center;
}
.nc-rewards-empty-emoji { font-size: 52px; margin-bottom: 10px; }
.nc-rewards-empty p { color: var(--nc-muted); margin-bottom: 18px; }

@media(max-width:480px) {
  .nc-reward-card { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; }
  .nc-reward-ico  { width: 40px; height: 40px; font-size: 22px; }
  .nc-reward-action { grid-column: 1 / -1; text-align: center; }
  .nc-reward-btn { width: 100%; justify-content: center; padding: 12px; }
  .nc-credits-tab { font-size: 12px; padding: 10px 8px; }
}

/* ── Buttons ─────────────────────────────────────────────── */
.nc-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border:none; border-radius:var(--nc-r-sm);
  font-size:14px; font-weight:700; cursor:pointer; transition:all .3s;
  letter-spacing:.2px; text-decoration:none; white-space:nowrap; color:var(--nc-text);
}
.nc-btn-primary {
  background:linear-gradient(135deg,var(--nc-primary),#8B5CF6,var(--nc-accent2));
  background-size:200% auto; position:relative; overflow:hidden;
}
.nc-btn-primary::before {
  content:''; position:absolute; inset:-2px;
  background:linear-gradient(135deg,var(--nc-accent),var(--nc-primary),var(--nc-accent2),var(--nc-accent));
  background-size:300% auto; border-radius:inherit;
  z-index:-1; filter:blur(8px); opacity:.5; animation:ncGlow 3s linear infinite;
}
.nc-btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(108,92,231,.4); background-position:right center; }
.nc-btn-gold { background:linear-gradient(135deg,var(--nc-gold),#FFA500); color:#000; }
.nc-btn-gold:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,215,0,.3); }
.nc-btn-ghost { background:var(--nc-glass); border:1px solid var(--nc-glass-b); color:#fff; backdrop-filter:blur(12px); }
.nc-btn-ghost:hover { border-color:var(--nc-primary); box-shadow:0 8px 24px rgba(108,92,231,.2); }
.nc-btn-danger { background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.25); color:#FF6B6B; }
.nc-btn-danger:hover { background:rgba(255,107,107,.22); }
.nc-btn-lg { padding:17px 40px; font-size:16px; border-radius:16px; }
.nc-btn-sm { padding:8px 16px; font-size:12px; border-radius:9px; }
.nc-btn:disabled { opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ── Actions row ─────────────────────────────────────────── */
.nc-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:24px; }

/* ── Toast ───────────────────────────────────────────────── */
.nc-toast {
  position:fixed; bottom:24px; right:24px; z-index:99999;
  display:flex; align-items:center; gap:10px;
  padding:13px 20px; background:var(--nc-dark3);
  border:1px solid var(--nc-glass-b); border-radius:14px;
  backdrop-filter:blur(20px); font-size:13px; font-weight:500;
  box-shadow:0 20px 60px rgba(0,0,0,.4); max-width:360px;
  transform:translateY(100px); opacity:0;
  transition:all .4s cubic-bezier(.23,1,.32,1);
}
.nc-toast.show { transform:translateY(0); opacity:1; }
.nc-toast.success { border-color:rgba(0,255,163,.2); }
.nc-toast.error   { border-color:rgba(255,107,157,.2); }

/* ── Preview v4 — full image + collapsible compare ──────── */
.nc-preview-topbar {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; margin-bottom:24px;
}
.nc-preview-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 16px; background:rgba(0,255,163,.08);
  border:1px solid rgba(0,255,163,.2); border-radius:50px;
  font-size:12px; font-weight:600; color:var(--nc-green);
}

/* Full result image — main display */
.nc-result-main {
  position:relative;
  display:flex; justify-content:center;
  margin-bottom:16px;
  border-radius:var(--nc-r); overflow:hidden;
  background:var(--nc-dark2);
  border:1px solid var(--nc-glass-b);
}
.nc-result-img {
  display:block; width:100%; max-height:70vh;
  object-fit:contain;
  border-radius:var(--nc-r);
  animation:ncFadeIn .5s ease;
}
.nc-result-dl-badge {
  position:absolute; top:14px; right:14px;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; background:rgba(0,0,0,.45);
  backdrop-filter:blur(10px); border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none; transition:all .3s; cursor:pointer;
}
.nc-result-dl-badge:hover { background:rgba(108,92,231,.4); transform:scale(1.1); }

/* Compare toggle button */
.nc-compare-toggle {
  text-align:center; margin-bottom:12px;
}

/* Compare wrap — collapsible */
.nc-compare-wrap {
  position:relative; border-radius:var(--nc-r); overflow:hidden;
  background:var(--nc-dark2); margin-bottom:20px;
  aspect-ratio:4/3; cursor:ew-resize;
  border:1px solid var(--nc-glass-b);
  /* FIXED: prevent blue text-selection highlight */
  user-select:none; -webkit-user-select:none; -moz-user-select:none;
  transition:max-height .4s ease, opacity .3s ease;
}
.nc-compare-hidden {
  max-height:0; opacity:0; margin:0; padding:0;
  pointer-events:none; overflow:hidden;
}
.nc-compare-visible {
  max-height:600px; opacity:1;
}

/* ── My Gallery — Toggle button wrapper ─────────────────── */
.nc-mygallery-toggle-wrap {
  margin-bottom:40px;
}
.nc-mygallery-toggle-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 22px; border-radius:50px;
  font-size:14px; font-weight:600;
  background:var(--nc-glass); border:1px solid var(--nc-glass-b);
  color:var(--nc-text); cursor:pointer;
  transition:all .25s; backdrop-filter:blur(12px);
}
.nc-mygallery-toggle-btn:hover,
.nc-mygallery-toggle-btn.open {
  background:rgba(108,92,231,.18);
  border-color:rgba(108,92,231,.5);
  box-shadow:0 4px 20px rgba(108,92,231,.25);
}
.nc-mgt-icon { font-size:18px; }
.nc-mgt-label { letter-spacing:.3px; }
.nc-mgt-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; border-radius:50px;
  background:var(--nc-primary); color:#fff;
  font-size:11px; font-weight:700; padding:0 6px;
}
.nc-mgt-arrow { font-size:10px; opacity:.7; margin-left:2px; }

/* ── My Gallery — Personal transformations ──────────────── */
#nc-mygallery-section { margin-bottom:48px; }
.nc-mygallery-scroll {
  display:flex; gap:16px; overflow-x:auto;
  padding-bottom:12px; padding-top:4px;
  scrollbar-width:thin; scrollbar-color:var(--nc-primary) transparent;
}
.nc-mygallery-scroll::-webkit-scrollbar { height:4px; }
.nc-mygallery-scroll::-webkit-scrollbar-thumb { background:var(--nc-primary); border-radius:2px; }
.nc-mytransform-card {
  flex-shrink:0; width:200px; border-radius:var(--nc-r-sm);
  background:var(--nc-glass); border:1px solid var(--nc-glass-b);
  overflow:hidden; cursor:pointer; transition:all .3s;
  animation:ncSlideIn .4s ease;
}
.nc-mytransform-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.2); box-shadow:0 16px 40px rgba(0,0,0,.3); }
.nc-mytransform-thumb {
  position:relative; width:100%; aspect-ratio:3/4; overflow:hidden;
  background:var(--nc-dark2);
}
.nc-mytransform-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.nc-mytransform-card:hover .nc-mytransform-thumb img { transform:scale(1.05); }
.nc-mytransform-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35);
  opacity:0; transition:opacity .3s;
}
.nc-mytransform-card:hover .nc-mytransform-overlay { opacity:1; }
.nc-mytransform-body { padding:12px; }
.nc-mytransform-name {
  font-size:12px; font-weight:700; color:var(--nc-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:3px;
}
.nc-mytransform-date { font-size:10px; color:var(--nc-muted); margin-bottom:10px; }
.nc-mytransform-actions { display:flex; gap:6px; flex-wrap:wrap; }
.nc-myt-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:4px; padding:5px 10px; border-radius:8px; border:none;
  font-size:10px; font-weight:700; cursor:pointer; transition:all .25s;
}
.nc-myt-view {
  background:rgba(0,206,255,.12); color:var(--nc-accent);
  border:1px solid rgba(0,206,255,.2);
}
.nc-myt-view:hover { background:rgba(0,206,255,.25); }
.nc-myt-share {
  background:rgba(0,255,163,.1); color:var(--nc-green);
  border:1px solid rgba(0,255,163,.2); flex:1;
}
.nc-myt-share:hover:not(.shared) { background:rgba(0,255,163,.22); }
.nc-myt-share.shared {
  background:rgba(0,255,163,.07); color:rgba(0,255,163,.5);
  cursor:default;
}
.nc-myt-del {
  background:rgba(255,107,107,.1); color:#FF6B6B;
  border:1px solid rgba(255,107,107,.2);
}
.nc-myt-del:hover { background:rgba(255,107,107,.22); }
.nc-myt-print {
  background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(108,92,231,.18));
  color:var(--nc-gold); border:1px solid rgba(212,175,55,.35);
  flex:1; font-weight:800;
}
.nc-myt-print:hover {
  background:linear-gradient(135deg,rgba(212,175,55,.3),rgba(108,92,231,.3));
  box-shadow:0 4px 12px rgba(212,175,55,.3);
}

/* ── Back / Cancel buttons ──────────────────────────────── */
.nc-back-btn {
  margin-top:20px;
  opacity:.7; transition:all .3s;
}
.nc-back-btn:hover { opacity:1; }

/* ── Gallery zoom hint ──────────────────────────────────── */
.nc-gallery-zoom-hint {
  position:absolute; top:10px; left:10px;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); backdrop-filter:blur(8px);
  border-radius:50%; font-size:14px; z-index:2;
  opacity:0; transition:opacity .3s;
  pointer-events:none;
}
.nc-gallery-card:hover .nc-gallery-zoom-hint { opacity:1; }

/* ── Lightbox ───────────────────────────────────────────── */
.nc-lightbox {
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
}
.nc-lightbox.open { opacity:1; }
.nc-lb-backdrop {
  position:absolute; inset:0;
  background:rgba(4,4,16,.95);
  backdrop-filter:blur(24px);
}
.nc-lb-close {
  position:absolute; top:20px; right:20px; z-index:10;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .3s;
}
.nc-lb-close:hover { background:rgba(255,107,157,.2); border-color:rgba(255,107,157,.4); transform:scale(1.1); }
.nc-lb-nav {
  position:absolute; top:50%; z-index:10;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:#fff; font-size:28px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transform:translateY(-50%); transition:all .3s;
}
.nc-lb-nav:hover { background:rgba(108,92,231,.25); border-color:var(--nc-primary); transform:translateY(-50%) scale(1.1); }
.nc-lb-prev { left:20px; }
.nc-lb-next { right:20px; }
.nc-lb-content {
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center;
  max-width:90vw; max-height:90vh;
  transition:opacity .2s, transform .2s;
  animation:ncLightboxIn .4s ease;
}
.nc-lb-img-wrap {
  max-width:85vw; max-height:72vh;
  border-radius:16px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.08);
}
.nc-lb-img {
  display:block; max-width:85vw; max-height:72vh;
  object-fit:contain;
  transition:transform .3s ease;
}
.nc-lb-info {
  margin-top:20px; text-align:center;
}
.nc-lb-effect {
  font-size:16px; font-weight:700;
  background:linear-gradient(135deg,var(--nc-accent),var(--nc-primary-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:4px;
}
.nc-lb-author { font-size:13px; color:rgba(255,255,255,.5); margin-bottom:12px; }
.nc-lb-actions { display:flex; align-items:center; gap:16px; justify-content:center; }
.nc-lb-like {
  display:inline-flex; align-items:center; gap:6px;
  transition:all .3s;
}
.nc-lb-like.liked { color:#FF6B9D !important; border-color:rgba(255,107,157,.3) !important; }
.nc-lb-views {
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; color:rgba(255,255,255,.45); font-weight:500;
}
.nc-lb-counter {
  font-size:12px; color:rgba(255,255,255,.35);
  font-weight:600;
}
.nc-lb-print-row {
  margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.nc-lb-print {
  min-width:260px;
  box-shadow:0 10px 30px rgba(108,92,231,.45);
  animation:ncPulseGlow 2.4s ease-in-out infinite;
}
.nc-lb-print-hint {
  font-size:12px; color:rgba(255,255,255,.55);
  text-align:center;
}
@keyframes ncPulseGlow {
  0%,100% { box-shadow:0 10px 30px rgba(108,92,231,.45); }
  50%     { box-shadow:0 14px 40px rgba(212,175,55,.55); }
}

/* ── 🎭 REMIX big CTA in lightbox ─────────────────────────── */
.nc-lb-remix-row {
  margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.nc-lb-remix {
  min-width:260px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg,#6C5CE7,#FF6B9D)!important;
  color:#fff!important; font-weight:800!important; letter-spacing:.3px;
  box-shadow:0 12px 34px rgba(255,107,157,.45);
  animation:ncRemixGlow 2.6s ease-in-out infinite;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s, filter .2s;
}
.nc-lb-remix:hover {
  transform:translateY(-2px) scale(1.03);
  filter:brightness(1.1);
  box-shadow:0 18px 40px rgba(108,92,231,.6);
}
.nc-lb-remix:active { transform:translateY(0) scale(.97); }
.nc-lb-remix.nc-remix-clicked { animation:ncRemixPop .38s cubic-bezier(.2,.9,.3,1.4); }
.nc-lb-remix-ico { font-size:20px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.nc-lb-remix-lbl { font-size:14px; }
.nc-lb-remix-cost {
  background:rgba(0,0,0,.25); padding:3px 9px; border-radius:999px;
  font-size:12px; font-weight:800;
}
.nc-lb-remix-hint {
  font-size:12px; color:rgba(255,255,255,.65);
  text-align:center;
}
@keyframes ncRemixGlow {
  0%,100% { box-shadow:0 12px 34px rgba(108,92,231,.45); }
  50%     { box-shadow:0 16px 44px rgba(255,107,157,.6); }
}

/* ── Confetti ───────────────────────────────────────────── */
.nc-confetti-container {
  position:fixed; inset:0; z-index:999999; pointer-events:none; overflow:hidden;
}
.nc-confetti {
  position:absolute; top:-20px;
  animation:ncConfettiFall linear forwards;
}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:900px) {
  .nc-effects-grid, .nc-style-scroll { grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:14px; }
}
@media(max-width:768px) {
  .nc-inner { padding:20px 16px 50px; }
  .nc-hero { padding:44px 16px 20px; }
  .nc-hero-stats { gap:20px; }
  .nc-effects-grid, .nc-style-scroll { grid-template-columns:repeat(2,1fr); gap:12px; }
  .nc-effect-art, .nc-style-img-wrap { height:110px; }
  .nc-effect-art-emoji { font-size:40px; }
  .nc-modal { padding:28px 18px; }
  .nc-packages-grid { grid-template-columns:repeat(2,1fr); }
  .nc-actions { flex-direction:column; align-items:stretch; width:100%; max-width:100%; }
  /* Let long button labels wrap instead of overflowing the screen. */
  .nc-btn {
    justify-content:center;
    white-space:normal;
    text-align:center;
    line-height:1.3;
    word-break:break-word;
    max-width:100%;
    padding:14px 18px;
  }
  .nc-btn-lg { padding:16px 20px; font-size:15px; }
  .nc-btn-sm { padding:10px 14px; }
  .nc-preview-section { max-width:100%; padding:0 2px; }
  .nc-upload-bar { flex-wrap:wrap; }
}
@media(max-width:480px) {
  .nc-effects-grid, .nc-style-scroll { grid-template-columns:1fr 1fr; gap:10px; }
  .nc-effect-art, .nc-style-img-wrap { height:90px; }
  .nc-effect-art-emoji { font-size:34px; }
  /* gallery responsive handled per-layout above */
  .nc-lb-nav { width:38px; height:38px; font-size:22px; }
  .nc-lb-prev { left:8px; }
  .nc-lb-next { right:8px; }
  .nc-lb-img-wrap { max-width:94vw; max-height:65vh; border-radius:12px; }
  .nc-lb-img { max-width:94vw; max-height:65vh; }
  .nc-preview-topbar { flex-direction:column; align-items:flex-start; }
  .nc-mytransform-card { width:160px; }
  .nc-result-img { max-height:55vh; }
}

/* ════════════════════════════════════════════════════════════
   BRAND HEADER — minimalist futurist identity bar (v2.4.0)
   Appears on every view, above the credit badge. Subtle glow
   so it reads as "signature" not "banner".
════════════════════════════════════════════════════════════ */
.nc-brand-header {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 22px 10px;
  max-width:1180px;
  margin:0 auto;
  position:relative;
  z-index:2;
}
.nc-brand-logo {
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  background:linear-gradient(135deg,#6C5CE7 0%,#FFD700 60%,#00CEFF 100%);
  border-radius:10px;
  color:#fff;
  box-shadow:0 6px 18px rgba(108,92,231,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  flex-shrink:0;
  animation:nc-logo-pulse 3.8s ease-in-out infinite;
}
@keyframes nc-logo-pulse {
  0%, 100% { box-shadow:0 6px 18px rgba(108,92,231,.35), 0 0 0 1px rgba(255,255,255,.08) inset; }
  50%      { box-shadow:0 8px 28px rgba(255,215,0,.45), 0 0 0 1px rgba(255,255,255,.15) inset; }
}
.nc-brand-wordmark {
  font-family:'Inter','SF Pro Display',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:.4px;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:baseline;
  gap:0;
}
.nc-brand-nova   { color:#fff; }
.nc-brand-design { color:#fff; font-weight:300; }
.nc-brand-ai {
  background:linear-gradient(135deg,#FFD700 0%,#00CEFF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:800;
  margin-left:2px;
  letter-spacing:.6px;
}
.nc-brand-spacer { flex:1; min-width:8px; }
.nc-brand-tagline {
  font-size:11px;
  color:var(--nc-muted);
  letter-spacing:.8px;
  text-transform:uppercase;
  opacity:.75;
  margin-right:14px;
}
@media(max-width:600px) {
  .nc-brand-header   { padding:12px 14px 8px; gap:9px; }
  .nc-brand-logo     { width:32px; height:32px; font-size:16px; border-radius:8px; }
  .nc-brand-wordmark { font-size:17px; }
  .nc-brand-tagline  { display:none; }
}

/* ════════════════════════════════════════════════════════════
   LOADING PNL — rotating fact during generation (v2.4.0)
   The "30% stuck" problem: user thinks the app froze. This
   rotating fact always shows motion even when the progress
   bar crawls. Takes the eye off the number.
════════════════════════════════════════════════════════════ */
.nc-proc-fact {
  margin-top:22px;
  padding:12px 18px;
  max-width:460px;
  background:linear-gradient(135deg,rgba(108,92,231,.08),rgba(0,206,255,.06));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  color:#e8e8f0;
  font-size:13px;
  line-height:1.5;
  text-align:center;
  transition:opacity .25s ease;
  opacity:1;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
@media(max-width:600px) {
  .nc-proc-fact { font-size:12px; padding:10px 14px; margin-top:18px; }
}

/* ════════════════════════════════════════════════════════════
   FORMAT MODAL — chosen style chip (v2.4.0)
   Reminds the user what they just picked while they browse
   canvas sizes. Removes a second of "wait, which style?".
════════════════════════════════════════════════════════════ */
.nc-fmt-chosen-style {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:6px auto 16px;
  padding:10px 14px;
  max-width:560px;
  background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(108,92,231,.08));
  border:1px solid rgba(255,215,0,.2);
  border-radius:14px;
}
.nc-fmt-chosen-label {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--nc-muted);
  font-weight:600;
}
.nc-fmt-chosen-chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 12px 4px 4px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  max-width:100%;
}
.nc-fmt-chosen-chip img {
  width:34px; height:34px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,.15);
}
.nc-fmt-chosen-emoji {
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#6C5CE7,#00CEFF);
  border-radius:50%;
  font-size:18px;
  flex-shrink:0;
}
.nc-fmt-chosen-name {
  font-size:13px;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:300px;
}
@media(max-width:480px) {
  .nc-fmt-chosen-name { max-width:180px; font-size:12px; }
}

/* ══════════════════════════════════════════════════════════
   TAB BAR (v2.4.0) — Portrait / Art / Mine / Community
   Sticky horizontal scroll on mobile so tabs never wrap.
   ══════════════════════════════════════════════════════════ */
.nc-tabbar {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 -20px 24px;
  padding: 10px 20px;
  background: linear-gradient(180deg, rgba(10,10,14,0.92) 0%, rgba(10,10,14,0.78) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nc-tabbar-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.nc-tabbar-scroll::-webkit-scrollbar { display: none; }

.nc-tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 16px;
  min-width: 140px;
  scroll-snap-align: start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: rgba(255,255,255,0.72);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(.4,0,.2,1);
  text-align: left;
  position: relative;
}
.nc-tab:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.nc-tab.is-active {
  background: linear-gradient(135deg, rgba(108,92,231,0.32) 0%, rgba(255,107,157,0.22) 100%);
  border-color: rgba(108,92,231,0.55);
  color: #fff;
  box-shadow: 0 6px 24px rgba(108,92,231,0.28);
}
.nc-tab.is-active::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg, #FFD700, #FF6B9D);
  border-radius: 2px;
}
.nc-tab-emoji {
  font-size: 18px;
  line-height: 1;
}
.nc-tab-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.nc-tab-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  font-weight: 400;
}
@media(max-width:480px) {
  .nc-tabbar { margin: 0 -14px 18px; padding: 8px 14px; }
  .nc-tab { min-width: 120px; padding: 8px 12px; }
  .nc-tab-label { font-size: 13px; }
  .nc-tab-sub { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════
   STUDIO GRID — horizontal carousel on mobile
   Desktop: grid. Mobile: horizontal scroll with snap.
   ══════════════════════════════════════════════════════════ */
@media(max-width:640px) {
  .nc-studio-grid {
    display: flex !important;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 14px;
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
    scrollbar-width: none;
  }
  .nc-studio-grid::-webkit-scrollbar { display: none; }
  .nc-studio-grid > .nc-studio-card {
    flex: 0 0 82%;
    max-width: 300px;
    scroll-snap-align: center;
  }
  .nc-studio-grid::after {
    content: '← →';
    position: sticky;
    right: 8px;
    align-self: center;
    color: rgba(255,255,255,0.3);
    font-size: 10px;
    letter-spacing: 2px;
    pointer-events: none;
  }
}

/* ══════════════════════════════════════════════════════════
   ART T2I SECTION (v2.4.0) — Generate from text
   ══════════════════════════════════════════════════════════ */
.nc-art-section {
  padding: 24px 0;
}
.nc-art-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  margin: 0 -4px 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.nc-art-cats::-webkit-scrollbar { display: none; }
.nc-art-cat {
  flex: 0 0 auto;
  padding: 9px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: all 0.18s ease;
}
.nc-art-cat:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.nc-art-cat.is-active {
  background: linear-gradient(135deg, #FFD700 0%, #FF6B9D 100%);
  color: #0F0F0F;
  border-color: transparent;
  box-shadow: 0 6px 22px rgba(255,215,0,0.35);
}

/* ============================================================
   ART IA v2.7.6 — Clean redesign (inspired by Midjourney / Canva AI)
   ============================================================ */

/* Mode switcher (Texte vs Visuel) */
.nc-art-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 28px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.nc-art-mode-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #cfd3e0;
  cursor: pointer;
  transition: all 0.22s;
  text-align: left;
}
.nc-art-mode-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.nc-art-mode-btn.is-active {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.25), rgba(255, 107, 157, 0.18));
  border-color: rgba(255, 215, 0, 0.45);
  color: #fff;
  box-shadow: 0 10px 28px rgba(108, 92, 231, 0.25);
}
.nc-art-mode-emoji {
  font-size: 32px;
  filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.4));
  flex-shrink: 0;
}
.nc-art-mode-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.nc-art-mode-label strong {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.nc-art-mode-label small {
  font-size: 11px;
  color: #9aa0b4;
}

/* Numbered blocks (Step 1, Step 2, Step 3) */
.nc-art-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 18px 16px;
  margin: 0 0 16px;
  transition: border-color 0.22s, background 0.22s;
}
.nc-art-block:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}
.nc-art-block-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: 0.2px;
}
.nc-art-block-label small {
  font-size: 11px;
  color: #9aa0b4;
  font-weight: 500;
  letter-spacing: 0.4px;
}
.nc-art-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FF6B9D);
  color: #0F0F0F;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}

/* Clean text input (Votre texte / description) */
.nc-art-text-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  color: #fff;
  resize: vertical;
  font-family: inherit;
  line-height: 1.55;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.nc-art-text-input:focus {
  outline: none;
  border-color: var(--nc-gold);
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.15);
}
.nc-art-text-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}
.nc-art-counter {
  text-align: right;
  font-size: 11px;
  color: #9aa0b4;
  margin-top: 6px;
}

/* Text sub-categories (Versets FR, MG, Citations, etc.) */
.nc-art-text-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.nc-art-text-cat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.nc-art-text-cat:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.nc-art-text-cat.is-active {
  background: linear-gradient(135deg, #6C5CE7, #FF6B9D);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(108, 92, 231, 0.35);
}

/* Text preset cards (Jean 3:16, Salamo 23, etc.) */
.nc-art-text-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: thin;
}
.nc-art-text-preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.18s;
  text-align: left;
  color: #fff;
}
.nc-art-text-preset:hover {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.3);
  transform: translateY(-1px);
}
.nc-art-text-preset.is-active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(255, 107, 157, 0.12));
  border-color: var(--nc-gold);
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.25);
}
.nc-art-text-preset-emoji { font-size: 22px; }
.nc-art-text-preset-title { font-size: 13px; font-weight: 700; line-height: 1.2; }
.nc-art-text-preset-sub { font-size: 10.5px; color: #9aa0b4; }

/* Typography style picker — 6 large cards */
.nc-art-typo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.nc-art-typo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 10px;
  cursor: pointer;
  transition: all 0.22s;
  color: #cfd3e0;
}
.nc-art-typo:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateY(-2px);
}
.nc-art-typo.is-active {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.25), rgba(255, 107, 157, 0.15));
  border-color: var(--nc-gold);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.25);
}
.nc-art-typo-emoji { font-size: 26px; filter: drop-shadow(0 2px 6px rgba(255, 215, 0, 0.4)); }
.nc-art-typo-name { font-size: 13px; font-weight: 800; }
.nc-art-typo-hint { font-size: 10.5px; color: #9aa0b4; text-align: center; }

/* Mood / ambiance chips */
.nc-art-mood-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.nc-art-mood {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.nc-art-mood:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.nc-art-mood.is-active {
  background: linear-gradient(135deg, #00CEFF, #6C5CE7);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 206, 255, 0.35);
}

/* Visual mode: style categories + inspiration grid */
.nc-art-visual-cats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.nc-art-visual-cat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfd3e0;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.nc-art-visual-cat:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nc-art-visual-cat.is-active {
  background: linear-gradient(135deg, #6C5CE7, #FF6B9D);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(108, 92, 231, 0.35);
}

.nc-art-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.nc-art-visual-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(108, 92, 231, 0.12), rgba(255, 107, 157, 0.06));
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 10px;
  cursor: pointer;
  transition: all 0.22s;
  color: #fff;
}
.nc-art-visual-card:hover {
  border-color: rgba(255, 215, 0, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(108, 92, 231, 0.25);
}
.nc-art-visual-card.is-active {
  border-color: var(--nc-gold);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.2), rgba(255, 107, 157, 0.1));
  box-shadow: 0 0 0 1px var(--nc-gold), 0 12px 32px rgba(255, 215, 0, 0.3);
}
.nc-art-visual-card-emoji { font-size: 36px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.4)); }
.nc-art-visual-card-title { font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.3; }

/* Generate CTA bar — sticky-ish */
.nc-art-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0 0;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(255, 107, 157, 0.1));
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 18px;
  flex-wrap: wrap;
}
.nc-art-cta-cost {
  font-size: 13px;
  color: #cfd3e0;
}
.nc-art-cta-cost strong {
  color: var(--nc-gold);
  font-weight: 900;
  font-size: 16px;
}
.nc-art-cta-bar .nc-btn-primary {
  background: linear-gradient(135deg, #FFD700 0%, #FF6B9D 50%, #6C5CE7 100%) !important;
  background-size: 200% 200% !important;
  animation: ncArtCtaShine 4s linear infinite;
  font-size: 16px !important;
  padding: 14px 28px !important;
  box-shadow: 0 8px 28px rgba(255, 215, 0, 0.35) !important;
}
@keyframes ncArtCtaShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 560px) {
  .nc-art-mode-switch { grid-template-columns: 1fr; }
  .nc-art-mode-btn { padding: 12px 14px; }
  .nc-art-typo-grid,
  .nc-art-visual-grid { grid-template-columns: repeat(2, 1fr); }
  .nc-art-cta-bar { flex-direction: column; align-items: stretch; }
  .nc-art-cta-bar .nc-btn-primary { width: 100%; }
}

/* ============================================================
   AVATAR IA v2.7.7 — Virtual influencer generator UI
   Inspired by Lensa Magic Avatars, Headshot Pro, modern 2026 SaaS
   ============================================================ */

.nc-avatar-section { padding: 0; }

.nc-avatar-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #00CEFF, #6C5CE7, #FF6B9D);
  background-size: 200% 100%;
  animation: ncStudioShine 4s linear infinite;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  box-shadow: 0 4px 16px rgba(0, 206, 255, 0.35);
}

.nc-avatar-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px;
  margin: 0 0 14px;
  transition: border-color 0.22s, background 0.22s;
}
.nc-avatar-block:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}

/* ── Gender switch (large pill buttons) ── */
.nc-avatar-gender-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.nc-avatar-gender {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: #cfd3e0;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s;
}
.nc-avatar-gender:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.nc-avatar-gender.is-active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.25), rgba(108, 92, 231, 0.18));
  border-color: var(--nc-gold);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 107, 157, 0.3);
}
.nc-avatar-gender-emoji { font-size: 28px; }

/* ── Age chips ── */
.nc-avatar-age-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.nc-avatar-age {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 6px;
  color: #cfd3e0;
  cursor: pointer;
  transition: all 0.2s;
}
.nc-avatar-age:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.nc-avatar-age.is-active {
  background: linear-gradient(135deg, #FFD700, #FF6B9D);
  border-color: transparent;
  color: #0F0F0F;
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.35);
}
.nc-avatar-age strong { font-size: 13px; font-weight: 800; }
.nc-avatar-age small { font-size: 10.5px; opacity: 0.8; }

/* ── Origin grid (flag + name) ── */
.nc-avatar-origin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.nc-avatar-origin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 6px;
  color: #cfd3e0;
  cursor: pointer;
  transition: all 0.2s;
}
.nc-avatar-origin:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateY(-2px);
}
.nc-avatar-origin.is-active {
  background: linear-gradient(135deg, rgba(0, 206, 255, 0.2), rgba(108, 92, 231, 0.15));
  border-color: var(--nc-accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 206, 255, 0.3);
}
.nc-avatar-origin-flag { font-size: 28px; }
.nc-avatar-origin-name { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2; }

/* ── Style grid (8 styles) ── */
.nc-avatar-style-grid,
.nc-avatar-scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.nc-avatar-style,
.nc-avatar-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 8px;
  color: #cfd3e0;
  cursor: pointer;
  transition: all 0.2s;
}
.nc-avatar-style:hover,
.nc-avatar-scene:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateY(-2px);
}
.nc-avatar-style.is-active {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.22), rgba(255, 215, 0, 0.12));
  border-color: var(--nc-accent2);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 107, 157, 0.3);
}
.nc-avatar-scene.is-active {
  background: linear-gradient(135deg, rgba(0, 206, 255, 0.18), rgba(0, 255, 163, 0.12));
  border-color: var(--nc-accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 206, 255, 0.3);
}
.nc-avatar-style-emoji,
.nc-avatar-scene-emoji { font-size: 22px; }
.nc-avatar-style-name,
.nc-avatar-scene-name { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.2; }

/* ── Multi-shot toggle (large cards) ── */
.nc-avatar-shotmode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 8px;
}
.nc-avatar-shotmode-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.22s;
  text-align: left;
  color: #cfd3e0;
}
.nc-avatar-shotmode-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.nc-avatar-shotmode-btn.is-active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(255, 107, 157, 0.12));
  border-color: var(--nc-gold);
  color: #fff;
  box-shadow: 0 10px 26px rgba(255, 215, 0, 0.25);
}
.nc-avatar-shotmode-icon { font-size: 22px; flex-shrink: 0; }
.nc-avatar-shotmode-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}
.nc-avatar-shotmode-info strong { font-size: 13px; font-weight: 800; }
.nc-avatar-shotmode-info small { font-size: 11px; color: #9aa0b4; }
.nc-avatar-shotmode-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--nc-gold);
  font-weight: 600;
  text-align: center;
}

/* ── Future / coming-soon row ── */
.nc-avatar-future {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 0 0 14px;
  background: rgba(108, 92, 231, 0.08);
  border: 1px dashed rgba(108, 92, 231, 0.35);
  border-radius: 12px;
  font-size: 12px;
  color: #a29bfe;
}
.nc-avatar-future-soon {
  padding: 3px 10px;
  background: rgba(255, 217, 61, 0.18);
  border: 1px solid rgba(255, 217, 61, 0.4);
  border-radius: 999px;
  color: #FFD93D;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.nc-avatar-future-dot { opacity: 0.4; }

@media (max-width: 560px) {
  .nc-avatar-gender-switch { grid-template-columns: 1fr 1fr; }
  .nc-avatar-age-chips { grid-template-columns: repeat(2, 1fr); }
  .nc-avatar-origin-grid,
  .nc-avatar-style-grid,
  .nc-avatar-scene-grid { grid-template-columns: repeat(3, 1fr); }
  .nc-avatar-shotmode { grid-template-columns: 1fr; }
}

/* ============================================================
   AVATAR ROSTER (Mes Avatars) v2.7.8
   Saved virtual influencers with reuse, rename, delete actions.
   ============================================================ */
.nc-avatar-roster {
  background: linear-gradient(135deg, rgba(0, 206, 255, 0.08), rgba(255, 107, 157, 0.06));
  border: 1px solid rgba(0, 206, 255, 0.25);
  border-radius: 18px;
  padding: 16px 18px;
  margin: 0 0 22px;
}
.nc-avatar-roster-loggedout,
.nc-avatar-roster-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.nc-avatar-roster-loggedout strong,
.nc-avatar-roster-empty strong {
  color: #fff;
  font-size: 14px;
  display: block;
  margin-bottom: 2px;
}
.nc-avatar-roster-loggedout div,
.nc-avatar-roster-empty div {
  color: #cfd3e0;
  font-size: 12.5px;
  flex: 1;
  min-width: 200px;
  line-height: 1.4;
}
.nc-avatar-roster-loggedout > div,
.nc-avatar-roster-empty > div { flex: 1; }
.nc-avatar-roster-ico {
  font-size: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0, 206, 255, 0.4));
}

.nc-avatar-roster-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #fff;
  font-size: 15px;
}
.nc-avatar-roster-count {
  padding: 2px 10px;
  background: rgba(0, 206, 255, 0.25);
  border: 1px solid rgba(0, 206, 255, 0.4);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #00CEFF;
}

.nc-avatar-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.nc-avatar-roster-card {
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.22s;
  display: flex;
  flex-direction: column;
}
.nc-avatar-roster-card:hover {
  border-color: var(--nc-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 206, 255, 0.3);
}
.nc-avatar-roster-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #2d1b5c, #4a2687);
  overflow: hidden;
}
.nc-avatar-roster-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nc-avatar-roster-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 48px;
  color: rgba(255, 255, 255, 0.4);
}
.nc-avatar-roster-flag {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 14px;
}
.nc-avatar-roster-body {
  padding: 8px 10px 2px;
}
.nc-avatar-roster-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nc-avatar-roster-meta {
  font-size: 10.5px;
  color: #9aa0b4;
  margin-top: 2px;
}
.nc-avatar-roster-actions {
  display: flex;
  gap: 4px;
  padding: 6px 8px 8px;
}
.nc-avatar-roster-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfd3e0;
  padding: 5px 6px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
}
.nc-avatar-roster-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.nc-avatar-roster-reuse {
  flex: 2;
  background: linear-gradient(135deg, var(--nc-accent), var(--nc-primary));
  border-color: transparent;
  color: #fff !important;
  font-weight: 800;
}
.nc-avatar-roster-reuse:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.nc-avatar-roster-del:hover { color: #FF6B9D; }

.nc-avatar-roster-hint {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: #9aa0b4;
  text-align: center;
  font-style: italic;
}

/* ─── Save-avatar modal ─── */
.nc-avatar-save-hd {
  text-align: center;
  padding: 14px 12px 8px;
}
.nc-avatar-save-emoji {
  font-size: 56px;
  margin-bottom: 6px;
  filter: drop-shadow(0 4px 14px rgba(255, 215, 0, 0.5));
  animation: ncFloat 3s ease-in-out infinite;
}
.nc-avatar-save-body {
  padding: 0 4px 4px;
}
.nc-avatar-save-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}
.nc-avatar-save-actions .nc-btn-primary {
  background: linear-gradient(135deg, #FFD700, #FF6B9D) !important;
}

@media (max-width: 560px) {
  .nc-avatar-roster-grid { grid-template-columns: repeat(2, 1fr); }
  .nc-avatar-save-actions { flex-direction: column; }
  .nc-avatar-save-actions .nc-btn { width: 100%; }
}

/* v2.7.3 — Art category groups (visual art vs text-based) */
.nc-art-cats-group-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  scroll-snap-align: start;
}
.nc-art-cats-group-sep {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.18);
  font-size: 18px;
  margin: 0 4px;
  user-select: none;
  pointer-events: none;
}
/* Text-based categories — slightly muted style to signal they're secondary */
.nc-art-cat-text:not(.is-active) {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
}
.nc-art-cat-text:not(.is-active):hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.nc-art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.nc-art-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 18px 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.nc-art-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(108,92,231,0.0), rgba(255,107,157,0.0));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.nc-art-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,215,0,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.nc-art-card:hover::before {
  background: linear-gradient(135deg, rgba(108,92,231,0.15), rgba(255,107,157,0.10));
  opacity: 1;
}
.nc-art-card.is-selected {
  border-color: #FFD700;
  background: linear-gradient(160deg, rgba(255,215,0,0.12) 0%, rgba(255,107,157,0.06) 100%);
  box-shadow: 0 8px 26px rgba(255,215,0,0.25);
}
.nc-art-card.is-selected::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  background: #FFD700;
  color: #0F0F0F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(255,215,0,0.5);
}
.nc-art-card-emoji {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 10px;
}
.nc-art-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.25;
}
.nc-art-card-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.35;
}

.nc-art-compose {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 20px;
  margin-top: 12px;
}
.nc-art-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}
.nc-art-textarea {
  width: 100%;
  min-height: 110px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nc-art-textarea:focus {
  outline: none;
  border-color: #FFD700;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.18);
}
.nc-art-textarea::placeholder {
  color: rgba(255,255,255,0.35);
}
.nc-art-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.nc-art-actions .nc-btn-primary { flex: 1; min-width: 220px; }
.nc-art-hint {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255,215,0,0.06);
  border-left: 3px solid rgba(255,215,0,0.5);
  border-radius: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  line-height: 1.45;
}
@media(max-width:480px) {
  .nc-art-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .nc-art-card { padding: 14px 12px; }
  .nc-art-card-emoji { font-size: 26px; margin-bottom: 6px; }
  .nc-art-card-title { font-size: 13px; }
  .nc-art-card-sub { font-size: 11px; }
  .nc-art-compose { padding: 16px; border-radius: 16px; }
  .nc-art-actions .nc-btn-primary { min-width: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM CLEARANCE (v2.6.1) — WordPress mobile menus
   (plugin bottom bars, sticky theme nav) typically float at
   ~60–80px. Without clearance, the "Générer" CTA in the Art
   section and other sticky footers get covered. We add bottom
   padding equal to that menu height + the iPhone safe-area.
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   MOBILE FLOATING CTA (v2.6.2) — The Art section's "Générer
   l'œuvre" button was hidden by WooCommerce's bottom account
   menu on phones. We mirror it as a floating pill pinned just
   above that menu (~72px) so users always see a clear action
   while reading/typing in the composer. Desktop hides it.
   ══════════════════════════════════════════════════════════ */
.nc-mobile-fab { display: none; }
@media(max-width:768px) {
  .nc-mobile-fab {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 24px);
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 9500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    background: linear-gradient(135deg, #FFD93D 0%, #FF6B9D 100%);
    color: #1a1020;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(255,107,157,0.45), 0 2px 8px rgba(0,0,0,0.35);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.34,1.4,.64,1), opacity .22s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    max-width: calc(100vw - 32px);
  }
  .nc-mobile-fab.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    animation: ncFabPulse 2.6s ease-in-out infinite 1.5s;
  }
  .nc-mobile-fab:active { transform: translate(-50%, 2px) scale(0.97); }
  .nc-mobile-fab-ico  { font-size: 16px; }
  .nc-mobile-fab-cost {
    font-size: 11px;
    font-weight: 900;
    padding: 3px 8px;
    background: rgba(20,14,30,0.85);
    color: #FFD93D;
    border-radius: 999px;
    margin-left: 4px;
  }
  @keyframes ncFabPulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(255,107,157,0.45), 0 2px 8px rgba(0,0,0,0.35); }
    50%      { box-shadow: 0 14px 38px rgba(255,217,61,0.55), 0 2px 10px rgba(0,0,0,0.4); }
  }
}

@media(max-width:768px) {
  .nc-ai-app {
    /* Extra scroll runway so WP mobile menu never hides the
       last CTA. Orbs still clipped by overflow:hidden in base
       rule; we only extend the container height here. */
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .nc-inner { padding-bottom: 24px; }
  /* Art section — extra breathing room so the Generate CTA
     sits above the WP floating mobile menu once you scroll. */
  .nc-art-section { padding-bottom: 24px; }
  .nc-art-compose { margin-bottom: 16px; }
  .nc-art-actions .nc-btn-primary {
    /* Slightly chunkier on mobile so the CTA remains a clear
       thumb target even near the bottom of the viewport. */
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 15px;
  }
  /* Sticky Studio footer — if it exists, lift above WP menu.
     The existing .nc-studio-footer already uses sticky inside
     its own scrollable modal, so it's unaffected by the parent
     overflow; we just pad for the iOS home indicator. */
  .nc-studio-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Any section that ends with a primary CTA gets a scroll
     margin so anchor-scrolls (e.g. after upload) don't hide it
     under the WP mobile menu. */
  .nc-section,
  .nc-art-section,
  .nc-studio-section { scroll-margin-bottom: 96px; }
}

/* ══════════════════════════════════════════════════════════
   EFFECTS COLLAPSE (v2.4.1) — Show ~8 effects, "Voir plus"
   toggle reveals the rest. Fade-out gradient hints at more.
   ══════════════════════════════════════════════════════════ */
.nc-effects-grid {
  position: relative;
  transition: max-height 0.45s cubic-bezier(.4,0,.2,1);
}
/* Collapsed: show only the first 5 cards (desktop) / 4 cards (mobile).
   Using :nth-child keeps the preview deterministic regardless of card
   aspect ratio or viewport — previously max-height bled extra rows. */
.nc-effects-grid--collapsed > .nc-effect-card:nth-child(n+6) {
  display: none;
}
.nc-effects-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(10,10,14,0) 0%,
    rgba(10,10,14,0.55) 45%,
    rgba(10,10,14,0.92) 100%
  );
  pointer-events: none;
  z-index: 2;
  border-radius: 0 0 14px 14px;
}
.nc-effects-count {
  color: #FFD700;
  font-weight: 600;
}
.nc-effects-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  padding: 0 8px;
}
.nc-effects-more {
  background: linear-gradient(135deg, rgba(255,215,0,0.12) 0%, rgba(255,107,157,0.10) 100%) !important;
  border: 1px solid rgba(255,215,0,0.38) !important;
  color: #FFD700 !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  padding: 14px 28px !important;
  border-radius: 14px !important;
  transition: all 0.22s ease !important;
  min-width: 260px;
}
.nc-effects-more:hover {
  background: linear-gradient(135deg, rgba(255,215,0,0.22) 0%, rgba(255,107,157,0.18) 100%) !important;
  border-color: #FFD700 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255,215,0,0.25);
}
@media(max-width:640px) {
  /* Mobile: cap preview at 4 cards (nicely fills a 2-col grid) */
  .nc-effects-grid--collapsed > .nc-effect-card:nth-child(n+5) { display: none; }
  .nc-effects-fade { height: 100px; }
  .nc-effects-more { min-width: 0; width: 100%; padding: 12px 20px !important; font-size: 13px !important; }
}

/* ────────────────────────────────────────────────────────────
   v2.4.6 — STUDIO i2i REFERENCE UPLOAD (Outfit / Teleport)
   User can upload a clothing image (outfit) or a scene image
   (teleport) — Seedream receives it as a second image_url,
   the main photo's subjects get transferred onto it.
   ──────────────────────────────────────────────────────────── */
.nc-studio-ref-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  margin: 8px 0 4px;
  padding: 16px;
  border: 2px dashed rgba(255,215,0,0.45);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(108,92,231,0.08) 0%, rgba(255,107,157,0.06) 100%);
  cursor: pointer;
  transition: all .18s ease;
}
.nc-studio-ref-zone:hover {
  border-color: #FFD700;
  background: linear-gradient(135deg, rgba(108,92,231,0.14) 0%, rgba(255,107,157,0.10) 100%);
  transform: translateY(-1px);
}
.nc-studio-ref-zone.has-ref {
  border-style: solid;
  border-color: rgba(132,204,22,0.55);
  background: rgba(132,204,22,0.06);
  cursor: default;
}
.nc-studio-ref-zone.has-ref:hover { transform: none; }
.nc-studio-ref-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: #cfd3e0;
  pointer-events: none;
}
.nc-studio-ref-empty strong { color: #fff; font-size: 14px; }
.nc-studio-ref-empty .nc-studio-ref-sub {
  font-size: 11px; color: #94a3b8; letter-spacing: .2px;
}
.nc-studio-ref-icon { font-size: 34px; line-height: 1; }
.nc-studio-ref-thumb {
  max-width: 160px;
  max-height: 160px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  margin-right: 14px;
}
.nc-studio-ref-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nc-studio-ref-status {
  font-size: 12px;
  color: #94a3b8;
  min-height: 16px;
  margin-bottom: 6px;
}
@media (max-width: 480px) {
  .nc-studio-ref-thumb { max-width: 120px; max-height: 120px; margin-right: 10px; }
}

/* ────────────────────────────────────────────────────────────
   v2.4.6 — "Mes Créations" tab empty state (no toggle anymore)
   ──────────────────────────────────────────────────────────── */
.nc-mygallery-empty .nc-empty-card {
  text-align: center;
  padding: 40px 24px;
  border: 1px solid rgba(255,215,0,0.20);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(108,92,231,0.08) 0%, rgba(255,107,157,0.06) 100%);
}
.nc-mygallery-empty .nc-empty-emoji {
  font-size: 64px;
  margin-bottom: 10px;
  animation: ncFloat 3.5s ease-in-out infinite;
}
.nc-mygallery-empty h3 {
  margin: 6px 0 8px;
  font-size: 20px;
  color: #fff;
}
.nc-mygallery-empty p {
  max-width: 440px;
  margin: 0 auto 20px;
  color: #cfd3e0;
  font-size: 14px;
  line-height: 1.55;
}

/* ============================================================
   FORMAT BROWSER (v2.6.10)
   Browse-by-format entry point. Card grid with realistic salon
   mockup per layout. Uses background-position trick to make the
   image appear to span across multiple panels seamlessly.
   ============================================================ */

.nc-fmt-browser {
  padding: 20px 16px 40px;
  max-width: 1280px;
  margin: 0 auto;
}

.nc-fmt-browser-head {
  text-align: center;
  margin: 8px 0 22px;
}
.nc-fmt-browser-title {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #FFD700 0%, #FF6B9D 50%, #6C5CE7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nc-fmt-browser-sub {
  font-size: 14px;
  color: #cfd3e0;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
}

.nc-fmt-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 28px;
}
.nc-fmt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cfd3e0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
}
.nc-fmt-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.nc-fmt-chip.is-active {
  background: linear-gradient(135deg, var(--nc-primary), var(--nc-accent2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

.nc-fmt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.nc-fmt-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #9aa0b4;
  font-size: 14px;
  padding: 40px 20px;
}

.nc-fmt-card {
  background: linear-gradient(180deg, #1a1838 0%, #14122a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  display: flex;
  flex-direction: column;
}
.nc-fmt-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 215, 0, 0.2);
}

/* Mockup — salon "wall + sofa" background */
.nc-fmt-mockup {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #f4f4f6 0%, #e2e2e6 65%, #d0d0d6 65%, #c4c4ca 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px 30px;
  overflow: hidden;
}
.nc-fmt-mockup::before {
  /* Subtle "wall" shadow */
  content: "";
  position: absolute;
  inset: 0 0 35% 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.06), transparent 70%);
  pointer-events: none;
}
.nc-fmt-mockup-sofa {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4px;
  height: 22%;
  background: linear-gradient(180deg, #b6b6c2 0%, #9b9bac 100%);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.nc-fmt-mockup-sofa::before,
.nc-fmt-mockup-sofa::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 18%;
  width: 18%;
  background: linear-gradient(180deg, #c8c8d2 0%, #aaaab8 100%);
  border-radius: 8px;
}
.nc-fmt-mockup-sofa::before { left: 4%; }
.nc-fmt-mockup-sofa::after  { right: 4%; }

/* The "tableau" frame container — sits on the wall */
.nc-fmt-mockup-frame {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end; /* panels align at bottom (pyramid effect) */
  justify-content: center;
  gap: 6px;
  height: 70%;
  width: 88%;
  max-width: 100%;
  padding: 0;
}

/* Generic panel — placeholder with subtle gradient */
.nc-fmt-panel {
  background-color: #2a2440;
  background-image:
    linear-gradient(135deg, rgba(255, 107, 157, 0.55) 0%, rgba(108, 92, 231, 0.55) 50%, rgba(0, 206, 255, 0.55) 100%),
    radial-gradient(circle at 30% 30%, rgba(255, 215, 0, 0.4), transparent 50%);
  background-size: 300% 100%; /* default for triptyques; overridden per layout */
  border-radius: 3px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    4px 6px 14px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* SINGLE — one panel only */
.nc-fmt-layout-single .nc-fmt-mockup-frame {
  align-items: center;
  height: 75%;
}
.nc-fmt-single {
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* TRIPTYCH — 3 equal panels side by side, background spans the trio */
.nc-fmt-layout-triptych-equal .nc-fmt-mockup-frame > .nc-fmt-panel {
  width: 30%;
  background-size: 300% 100%;
}

/* QUADRIPTYCH ROW — 4 equal panels */
.nc-fmt-layout-quadriptych-row .nc-fmt-mockup-frame > .nc-fmt-panel {
  width: 22%;
  background-size: 400% 100%;
}

/* PENTAPTYCH PYRAMID — 5 panels, staircase heights from data-h, bottom-aligned */
.nc-fmt-layout-pentaptych-pyramid .nc-fmt-mockup-frame {
  align-items: flex-end;
}
.nc-fmt-layout-pentaptych-pyramid .nc-fmt-mockup-frame > .nc-fmt-panel {
  width: 17%;
  background-size: 500% 100%;
}

/* PENTAPTYCH EQUAL — 5 panels of equal height */
.nc-fmt-layout-pentaptych-equal .nc-fmt-mockup-frame > .nc-fmt-panel {
  width: 17%;
  height: 100%;
  background-size: 500% 100%;
}

/* Card body — name, dims, price, CTA */
.nc-fmt-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.nc-fmt-card-name {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}
.nc-fmt-card-dims {
  margin: 0;
  font-size: 13px;
  color: #cfd3e0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nc-fmt-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: #FFD700;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* v2.7.2 — Art-only badge for multi-panel cards */
.nc-fmt-pill-art {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.2), rgba(108, 92, 231, 0.2));
  border-color: rgba(255, 107, 157, 0.4);
  color: #FF6B9D;
  margin-left: 6px;
}
.nc-fmt-card.is-art-only .nc-fmt-card-cta {
  background: linear-gradient(135deg, #FF6B9D, #6C5CE7);
}
.nc-fmt-mockup-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(108, 92, 231, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4);
  z-index: 2;
}

/* v2.7.2 — Banner shown at top of Portrait/Art when format pre-selected */
.nc-fmt-chosen-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 20px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(255, 107, 157, 0.08));
  border: 1px solid rgba(108, 92, 231, 0.3);
  border-radius: 14px;
  flex-wrap: wrap;
}
.nc-fmt-chosen-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 200px;
}
.nc-fmt-chosen-emoji {
  font-size: 28px;
  flex-shrink: 0;
}
.nc-fmt-chosen-name {
  font-size: 14px;
  color: #fff;
  line-height: 1.3;
}
.nc-fmt-chosen-name strong {
  color: var(--nc-gold);
  font-weight: 800;
}
.nc-fmt-chosen-meta {
  font-size: 12px;
  color: #cfd3e0;
  margin-top: 2px;
}
.nc-fmt-chosen-change {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.nc-fmt-chosen-change:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}
.nc-fmt-card-supports {
  margin: 0;
  font-size: 12px;
  color: #9aa0b4;
}
.nc-fmt-card-price {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 900;
  color: var(--nc-gold);
}
.nc-fmt-card-price span {
  font-size: 13px;
  color: #cfd3e0;
  font-weight: 700;
  margin-left: 4px;
}
.nc-fmt-card-cta {
  margin-top: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--nc-primary), var(--nc-accent2));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.nc-fmt-card-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(108, 92, 231, 0.5);
}

@media (max-width: 560px) {
  .nc-fmt-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .nc-fmt-card-name { font-size: 14px; }
  .nc-fmt-card-price { font-size: 18px; }
  .nc-fmt-card-cta { padding: 10px 14px; font-size: 13px; }
  .nc-fmt-card-supports { font-size: 11px; }
}
@media (max-width: 380px) {
  .nc-fmt-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RESULT MULTI-PANEL (v2.6.10)
   When the customer picks a triptyque/quadriptyque/pentaptyque,
   the preview shows the SAME panoramic image split across N
   panels with gaps + 3D shadows so they see exactly what their
   future printed canvas will look like on the wall.
   ============================================================ */

.nc-result-multipanel {
  position: relative;
  background: linear-gradient(180deg, #f4f4f6 0%, #e2e2e6 88%, #c4c4ca 88%, #b6b6c2 100%);
  border-radius: 18px;
  padding: 32px 24px 44px;
  margin: 0 auto;
  max-width: 100%;
  box-shadow:
    inset 0 -40px 80px rgba(0, 0, 0, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Inner frame — holds the N panels, bottom-aligned for pyramid */
.nc-result-multipanel-frame {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  height: clamp(220px, 38vw, 460px);
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

/* Each panel — same image as background, sliced via background-position */
.nc-result-panel {
  flex: 1;
  background-color: #1a1838;
  border-radius: 3px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.22),
    6px 10px 22px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: transform 0.3s;
}
.nc-result-panel:hover {
  transform: translateY(-3px);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.28),
    8px 14px 28px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Triptyque + quadriptyque: equal heights */
.nc-result-layout-triptych-equal .nc-result-panel,
.nc-result-layout-quadriptych-row .nc-result-panel {
  height: 100% !important;
}

/* Pentaptyque pyramide: heights from inline style (56/78/100/78/56) */
.nc-result-layout-pentaptych-pyramid .nc-result-multipanel-frame {
  align-items: flex-end;
}

/* Pentaptyque équal: all 100% */
.nc-result-layout-pentaptych-equal .nc-result-panel {
  height: 100% !important;
}

.nc-result-multipanel-caption {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: #475569;
  font-weight: 600;
}
.nc-result-multipanel-caption strong {
  color: #0f172a;
}

/* Download badge — stays in top-right corner regardless of layout */
.nc-result-multipanel .nc-result-dl-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
  z-index: 2;
}
.nc-result-multipanel .nc-result-dl-badge:hover {
  transform: scale(1.1);
}

@media (max-width: 560px) {
  .nc-result-multipanel {
    padding: 24px 14px 36px;
  }
  .nc-result-multipanel-frame {
    gap: 8px;
    height: clamp(160px, 50vw, 320px);
  }
  .nc-result-multipanel-caption {
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════
   v2.7.9 — Art Visuel & Avatar IA : photo reference uploads
   Drop zones + thumbnails + active badges for i2i mode.
════════════════════════════════════════════════════════════ */

/* ── Art Visuel : reference photo (inspiration) ─────────── */
.nc-art-ref-block {
  background: linear-gradient(135deg, rgba(255, 200, 102, 0.08), rgba(255, 100, 180, 0.06));
  border: 1px dashed rgba(255, 150, 80, 0.4);
  border-radius: 18px;
  padding: 20px;
  margin-top: 8px;
}
.nc-art-ref-drop {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(255, 180, 120, 0.5);
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
}
.nc-art-ref-drop:hover {
  background: rgba(255, 200, 120, 0.1);
  border-color: rgba(255, 200, 120, 0.85);
  transform: translateY(-1px);
}
.nc-art-ref-drop-ico {
  font-size: 36px;
  flex-shrink: 0;
}
.nc-art-ref-drop-txt strong {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 3px;
}
.nc-art-ref-drop-txt small {
  font-size: 12px;
  opacity: 0.75;
}
.nc-art-ref-hint {
  font-size: 13px;
  opacity: 0.78;
  margin: 12px 0 0;
  line-height: 1.5;
}
.nc-art-ref-active {
  display: flex;
  gap: 18px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 200, 120, 0.14), rgba(255, 130, 200, 0.1));
  border: 1px solid rgba(255, 200, 120, 0.45);
  border-radius: 16px;
  padding: 14px;
}
.nc-art-ref-thumb {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.nc-art-ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nc-art-ref-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 6px;
  background: linear-gradient(90deg, #ff8e3a, #ff4d8d);
  color: #fff;
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.nc-art-ref-body {
  flex: 1;
  min-width: 0;
}
.nc-art-ref-body strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
.nc-art-ref-body p {
  font-size: 13px;
  opacity: 0.78;
  margin: 0 0 10px;
  line-height: 1.45;
}

/* ── Avatar IA : face reference photo (identity lock) ────── */
.nc-avatar-face-block {
  background: linear-gradient(135deg, rgba(110, 220, 255, 0.08), rgba(255, 100, 200, 0.06));
  border: 1px dashed rgba(110, 220, 255, 0.4);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
}
.nc-avatar-face-drop {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(110, 220, 255, 0.5);
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
}
.nc-avatar-face-drop:hover {
  background: rgba(110, 220, 255, 0.1);
  border-color: rgba(110, 220, 255, 0.85);
  transform: translateY(-1px);
}
.nc-avatar-face-drop-ico {
  font-size: 36px;
  flex-shrink: 0;
}
.nc-avatar-face-drop-txt strong {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 3px;
}
.nc-avatar-face-drop-txt small {
  font-size: 12px;
  opacity: 0.75;
}
.nc-avatar-face-hint {
  font-size: 13px;
  opacity: 0.78;
  margin: 12px 0 0;
  line-height: 1.5;
}
.nc-avatar-face-active {
  display: flex;
  gap: 18px;
  align-items: center;
  background: linear-gradient(135deg, rgba(110, 220, 255, 0.18), rgba(255, 100, 200, 0.12));
  border: 1px solid rgba(110, 220, 255, 0.5);
  border-radius: 16px;
  padding: 14px;
}
.nc-avatar-face-thumb {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.nc-avatar-face-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nc-avatar-face-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 6px;
  background: linear-gradient(90deg, #00d4ff, #ff4dba);
  color: #fff;
  border-radius: 999px;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.nc-avatar-face-body {
  flex: 1;
  min-width: 0;
}
.nc-avatar-face-body strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
.nc-avatar-face-body p {
  font-size: 13px;
  opacity: 0.78;
  margin: 0 0 10px;
  line-height: 1.45;
}
.nc-avatar-face-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Mobile : stack thumbnail above body, keep readable text */
@media (max-width: 560px) {
  .nc-art-ref-active,
  .nc-avatar-face-active {
    flex-direction: column;
    align-items: stretch;
  }
  .nc-art-ref-thumb,
  .nc-avatar-face-thumb {
    width: 100%;
    height: 180px;
  }
  .nc-art-ref-drop,
  .nc-avatar-face-drop {
    padding: 18px 14px;
  }
  .nc-art-ref-drop-ico,
  .nc-avatar-face-drop-ico {
    font-size: 30px;
  }
}

/* ════════════════════════════════════════════════════════════
   v2.7.10 — PHOTOSHOOT VIEW (multi-shot gallery)
   3 slots side-by-side with live polling status indicators.
════════════════════════════════════════════════════════════ */
.nc-shoot-view {
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 18px 60px;
}
.nc-shoot-hd {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.nc-shoot-title-wrap { flex: 1; min-width: 240px; }
.nc-shoot-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(90deg, rgba(0,212,255,0.18), rgba(255,77,186,0.18));
  border: 1px solid rgba(0,212,255,0.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.nc-shoot-title {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.15;
}
.nc-shoot-sub {
  font-size: 14px;
  opacity: 0.82;
  margin: 0;
}
.nc-shoot-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 26px;
}
.nc-shoot-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.nc-shoot-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4ff, #ff4dba);
  border-radius: 999px;
  transition: width 0.45s ease;
}
.nc-shoot-progress-txt {
  font-weight: 700;
  font-size: 14px;
  min-width: 42px;
  text-align: right;
}

.nc-shoot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .nc-shoot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .nc-shoot-grid { grid-template-columns: 1fr; }
}

.nc-shoot-slot {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.nc-shoot-slot--completed {
  border-color: rgba(0,212,170,0.55);
  box-shadow: 0 8px 32px rgba(0,212,170,0.15);
}
.nc-shoot-slot--failed {
  border-color: rgba(255,80,80,0.5);
}
.nc-shoot-slot--processing,
.nc-shoot-slot--submitting {
  border-color: rgba(0,212,255,0.45);
}
.nc-shoot-slot-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nc-shoot-slot-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0.6;
}
.nc-shoot-slot-label {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}
.nc-shoot-slot-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.nc-shoot-badge--completed { background: rgba(0,212,170,0.22); color: #5effb3; }
.nc-shoot-badge--failed    { background: rgba(255,80,80,0.25);  color: #ff9d9d; }
.nc-shoot-badge--pending   { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
.nc-shoot-badge--processing,
.nc-shoot-badge--submitting { background: rgba(0,212,255,0.22); color: #79e4ff; }

.nc-shoot-slot-img-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 280px;
}
.nc-shoot-slot-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nc-shoot-slot-actions {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}
.nc-shoot-slot-act {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: transform 0.18s ease, background 0.18s ease;
  backdrop-filter: blur(6px);
}
.nc-shoot-slot-act:hover {
  transform: scale(1.1);
  background: rgba(255,77,186,0.85);
}
.nc-shoot-slot-loading,
.nc-shoot-slot-pending,
.nc-shoot-slot-fail {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 18px;
  text-align: center;
}
.nc-shoot-slot-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255,255,255,0.1);
  border-top-color: #00d4ff;
  border-radius: 50%;
  animation: nc-spin 0.85s linear infinite;
}
@keyframes nc-spin { to { transform: rotate(360deg); } }
.nc-shoot-slot-pending-ico,
.nc-shoot-slot-fail-ico {
  font-size: 34px;
  opacity: 0.7;
}
.nc-shoot-slot-fail-msg {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 4px;
}

.nc-shoot-cta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.nc-shoot-coherence-note {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════
   v2.7.10 — AVATAR DETAIL MODAL
   Click a roster card → large image + full info + actions.
════════════════════════════════════════════════════════════ */
.nc-avatar-detail-modal {
  max-width: 920px;
  padding: 0;
  overflow: hidden;
}
.nc-avatar-detail-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  max-height: 88vh;
}
@media (max-width: 760px) {
  .nc-avatar-detail-grid {
    grid-template-columns: 1fr;
    max-height: 92vh;
    overflow-y: auto;
  }
}
.nc-avatar-detail-imgwrap {
  position: relative;
  background: #0a0a14;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nc-avatar-detail-img {
  width: 100%;
  height: 100%;
  max-height: 88vh;
  object-fit: cover;
  display: block;
}
.nc-avatar-detail-noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.55;
}
.nc-avatar-detail-noimg span {
  font-size: 64px;
}
.nc-avatar-detail-dl {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  transition: transform 0.18s ease;
  backdrop-filter: blur(6px);
}
.nc-avatar-detail-dl:hover { transform: scale(1.1); }

.nc-avatar-detail-body {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.nc-avatar-detail-flagrow {
  display: flex;
  gap: 10px;
  align-items: center;
}
.nc-avatar-detail-flag { font-size: 28px; }
.nc-avatar-detail-gender { font-size: 22px; opacity: 0.85; }
.nc-avatar-detail-name {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  line-height: 1.15;
}
.nc-avatar-detail-meta {
  font-size: 14px;
  opacity: 0.75;
  margin: 0;
}
.nc-avatar-detail-info {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.nc-avatar-detail-info li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  font-size: 13px;
}
.nc-avatar-detail-info li span { opacity: 0.7; }
.nc-avatar-detail-info li strong { font-weight: 700; }
.nc-avatar-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.nc-avatar-detail-actions .nc-btn-lg { width: 100%; margin-bottom: 6px; }
.nc-avatar-detail-tip {
  margin: 6px 0 0;
  font-size: 12px;
  opacity: 0.62;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   v2.7.10 — AVATAR PRODUCT SHOWCASE (Phase 3)
   Collapsed toggle → expanded type-picker + upload zone.
════════════════════════════════════════════════════════════ */
.nc-avatar-product-block {
  background: linear-gradient(135deg, rgba(255,140,80,0.08), rgba(255,80,180,0.06));
  border: 1px dashed rgba(255,140,80,0.4);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
  position: relative;
}
.nc-avatar-product--collapsed { padding: 0; border-style: solid; }
.nc-avatar-product-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: linear-gradient(90deg, rgba(255,140,80,0.1), rgba(255,80,180,0.07));
  border: none;
  border-radius: 18px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, transform 0.18s ease;
}
.nc-avatar-product-toggle:hover {
  background: linear-gradient(90deg, rgba(255,140,80,0.22), rgba(255,80,180,0.15));
  transform: translateY(-1px);
}
.nc-avatar-product-toggle-ico { font-size: 32px; }
.nc-avatar-product-toggle-txt { flex: 1; }
.nc-avatar-product-toggle-txt strong { display: block; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.nc-avatar-product-toggle-txt small { font-size: 12px; opacity: 0.72; }
.nc-avatar-product-toggle-arrow { font-size: 22px; opacity: 0.5; }

.nc-avatar-product-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: background 0.15s ease;
}
.nc-avatar-product-close:hover { background: rgba(255,80,80,0.5); }

.nc-avatar-product-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 16px;
}
.nc-avatar-product-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
}
.nc-avatar-product-type:hover {
  background: rgba(255,140,80,0.12);
  border-color: rgba(255,140,80,0.45);
}
.nc-avatar-product-type.is-active {
  background: linear-gradient(135deg, rgba(255,140,80,0.25), rgba(255,80,180,0.18));
  border-color: rgba(255,140,80,0.7);
  box-shadow: 0 4px 14px rgba(255,140,80,0.2);
}
.nc-avatar-product-type-emoji { font-size: 28px; }
.nc-avatar-product-type-name { font-weight: 700; font-size: 13px; }
.nc-avatar-product-type small { font-size: 10px; opacity: 0.68; text-align: center; }

.nc-avatar-product-drop {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  background: rgba(255,255,255,0.04);
  border: 2px dashed rgba(255,140,80,0.5);
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}
.nc-avatar-product-drop:hover {
  background: rgba(255,140,80,0.1);
  border-color: rgba(255,140,80,0.85);
  transform: translateY(-1px);
}
.nc-avatar-product-drop-ico { font-size: 32px; }
.nc-avatar-product-drop-txt strong { display: block; font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.nc-avatar-product-drop-txt small { font-size: 11px; opacity: 0.7; }
.nc-avatar-product-hint {
  margin: 10px 0 0;
  font-size: 12px;
  opacity: 0.72;
  line-height: 1.5;
}

.nc-avatar-product-active {
  display: flex;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255,140,80,0.16), rgba(255,80,180,0.1));
  border: 1px solid rgba(255,140,80,0.5);
  border-radius: 14px;
  padding: 12px;
}
.nc-avatar-product-thumb {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.nc-avatar-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nc-avatar-product-badge {
  position: absolute;
  bottom: 4px; left: 4px; right: 4px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 4px;
  background: linear-gradient(90deg, #ff8e3a, #ff4d8d);
  color: #fff;
  border-radius: 999px;
  letter-spacing: 0.4px;
}
.nc-avatar-product-body { flex: 1; min-width: 0; }
.nc-avatar-product-body strong { display: block; font-size: 14px; margin-bottom: 3px; }
.nc-avatar-product-body p { font-size: 12px; opacity: 0.78; margin: 0 0 8px; line-height: 1.45; }
.nc-avatar-product-actions { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .nc-avatar-product-active { flex-direction: column; align-items: stretch; }
  .nc-avatar-product-thumb  { width: 100%; height: 160px; }
  .nc-avatar-product-types  { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   v2.7.11 — CONTRAST FIXES
   Theme overrides were forcing black text in modals/toasts.
   Use high-specificity + !important to win the cascade.
════════════════════════════════════════════════════════════ */
.nc-modal input,
.nc-modal textarea,
.nc-modal select,
.nc-modal .nc-art-text-input,
.nc-shoot-view input,
.nc-shoot-view textarea,
input.nc-art-text-input,
textarea.nc-art-text-input,
.nc-avatar-section input,
.nc-avatar-section textarea,
.nc-art-section input,
.nc-art-section textarea {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.35) !important;
  caret-color: #ffffff !important;
}
.nc-modal input::placeholder,
.nc-modal textarea::placeholder,
.nc-shoot-view input::placeholder,
.nc-shoot-view textarea::placeholder,
input.nc-art-text-input::placeholder,
textarea.nc-art-text-input::placeholder,
.nc-avatar-section input::placeholder,
.nc-avatar-section textarea::placeholder,
.nc-art-section input::placeholder,
.nc-art-section textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Toasts — always white text on the dark glass card */
.nc-toast,
.nc-toast * {
  color: #ffffff !important;
}
.nc-toast {
  background: rgba(18, 22, 38, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.nc-toast.success { border-left: 3px solid #5effb3 !important; }
.nc-toast.error   { border-left: 3px solid #ff8a8a !important; }
.nc-toast.info    { border-left: 3px solid #79e4ff !important; }

/* Modal titles + body text — readable on dark glass */
.nc-modal,
.nc-modal h1,
.nc-modal h2,
.nc-modal h3,
.nc-modal .nc-modal-title,
.nc-modal .nc-modal-sub,
.nc-modal p,
.nc-modal label,
.nc-modal strong,
.nc-modal small {
  color: #ffffff !important;
}
.nc-modal .nc-modal-sub,
.nc-modal small,
.nc-modal p {
  opacity: 0.78;
}

/* Photoshoot view : ensure all text is readable */
.nc-shoot-view,
.nc-shoot-view h1,
.nc-shoot-view h2,
.nc-shoot-view p,
.nc-shoot-view small,
.nc-shoot-view strong,
.nc-shoot-view .nc-shoot-title,
.nc-shoot-view .nc-shoot-sub,
.nc-shoot-view .nc-shoot-slot-label,
.nc-shoot-view .nc-shoot-progress-txt,
.nc-shoot-view .nc-shoot-coherence-note {
  color: #ffffff !important;
}
.nc-shoot-view .nc-shoot-sub,
.nc-shoot-view .nc-shoot-coherence-note,
.nc-shoot-view small {
  opacity: 0.82;
}

/* Avatar save modal name field — extra-defensive (this is the
   one the user explicitly couldn't read) */
#nc-avatar-save-modal input,
#nc-avatar-save-modal textarea,
#nc-avatar-save-name {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 2px solid rgba(0, 212, 255, 0.4) !important;
}
#nc-avatar-save-name:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.18) !important;
}

/* ════════════════════════════════════════════════════════════
   v2.7.11 — Avatar IA new selectors
   Sub-labels, body chips, subject stepper, origin "Voir plus",
   hair grid, beauty filter grid, framing grid, custom scene.
════════════════════════════════════════════════════════════ */
.nc-avatar-sublabel {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.78;
  margin: 14px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
}
.nc-avatar-sublabel small { font-weight: 500; opacity: 0.6; }

/* Body chips — compact horizontal */
.nc-avatar-body-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nc-avatar-body {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nc-avatar-body:hover { background: rgba(255,255,255,0.1); }
.nc-avatar-body.is-active {
  background: linear-gradient(90deg, rgba(0,212,255,0.3), rgba(255,77,186,0.25));
  border-color: rgba(0,212,255,0.7);
  box-shadow: 0 3px 12px rgba(0,212,255,0.2);
}

/* Subject stepper */
.nc-avatar-subject-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nc-avatar-subject-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nc-avatar-subject-btn:hover:not(:disabled) {
  background: rgba(0,212,255,0.25);
  border-color: rgba(0,212,255,0.6);
}
.nc-avatar-subject-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.nc-avatar-subject-pips {
  display: flex;
  gap: 4px;
  flex: 1;
}
.nc-avatar-subject-pip {
  flex: 1;
  height: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nc-avatar-subject-pip:hover { background: rgba(255,255,255,0.09); }
.nc-avatar-subject-pip.is-active {
  background: linear-gradient(90deg, #00d4ff, #ff4dba);
  border-color: transparent;
  color: #fff;
  font-weight: 800;
}
.nc-avatar-subject-hint {
  font-size: 12px;
  opacity: 0.75;
  margin: 8px 0 0;
  line-height: 1.5;
}

/* Origin "Voir plus" button */
.nc-avatar-origin-more {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.nc-avatar-origin-more:hover {
  background: rgba(0,212,255,0.1);
  border-color: rgba(0,212,255,0.45);
}

/* Hair grid */
.nc-avatar-hair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.nc-avatar-hair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}
.nc-avatar-hair:hover { background: rgba(255,255,255,0.09); }
.nc-avatar-hair.is-active {
  background: linear-gradient(135deg, rgba(255,140,80,0.25), rgba(255,80,180,0.18));
  border-color: rgba(255,140,80,0.7);
}
.nc-avatar-hair-emoji { font-size: 22px; }
.nc-avatar-hair-name { font-weight: 700; font-size: 12px; }

/* Beauty filter grid */
.nc-avatar-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.nc-avatar-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}
.nc-avatar-filter:hover { background: rgba(255,255,255,0.09); }
.nc-avatar-filter.is-active {
  background: linear-gradient(135deg, rgba(255,80,180,0.3), rgba(0,212,255,0.18));
  border-color: rgba(255,80,180,0.7);
  box-shadow: 0 4px 14px rgba(255,80,180,0.18);
}
.nc-avatar-filter-emoji { font-size: 24px; }
.nc-avatar-filter-name  { font-weight: 700; font-size: 12px; }

/* Framing grid */
.nc-avatar-framing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.nc-avatar-framing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}
.nc-avatar-framing:hover { background: rgba(255,255,255,0.09); }
.nc-avatar-framing.is-active {
  background: linear-gradient(135deg, rgba(0,212,170,0.3), rgba(0,212,255,0.18));
  border-color: rgba(0,212,170,0.7);
}
.nc-avatar-framing-emoji { font-size: 26px; }
.nc-avatar-framing-name  { font-weight: 700; font-size: 12px; }

/* Custom scene upload */
.nc-avatar-scene-custom-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(110,250,200,0.08), rgba(0,212,255,0.06));
  border: 2px dashed rgba(110,250,200,0.45);
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  margin-bottom: 12px;
  text-align: left;
  transition: all 0.18s ease;
}
.nc-avatar-scene-custom-drop:hover {
  background: linear-gradient(90deg, rgba(110,250,200,0.16), rgba(0,212,255,0.1));
  border-color: rgba(110,250,200,0.8);
  transform: translateY(-1px);
}
.nc-avatar-scene-custom-ico { font-size: 28px; }
.nc-avatar-scene-custom-txt strong { display: block; font-weight: 700; font-size: 14px; }
.nc-avatar-scene-custom-txt small  { font-size: 11px; opacity: 0.72; }

.nc-avatar-scene-custom-active {
  display: flex;
  gap: 12px;
  align-items: center;
  background: linear-gradient(135deg, rgba(110,250,200,0.18), rgba(0,212,255,0.12));
  border: 1px solid rgba(110,250,200,0.5);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}
.nc-avatar-scene-custom-thumb {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.nc-avatar-scene-custom-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nc-avatar-scene-custom-badge {
  position: absolute;
  bottom: 4px; left: 4px; right: 4px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  padding: 3px;
  background: linear-gradient(90deg, #6efac8, #00d4ff);
  color: #001;
  border-radius: 999px;
  letter-spacing: 0.4px;
}
.nc-avatar-scene-custom-body { flex: 1; min-width: 0; }
.nc-avatar-scene-custom-body strong { display: block; font-size: 14px; margin-bottom: 3px; }
.nc-avatar-scene-custom-body p { font-size: 12px; opacity: 0.78; margin: 0 0 8px; line-height: 1.45; }
.nc-avatar-scene-custom-actions { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .nc-avatar-scene-custom-active { flex-direction: column; align-items: stretch; }
  .nc-avatar-scene-custom-thumb  { width: 100%; height: 160px; }
  .nc-avatar-hair-grid           { grid-template-columns: repeat(2, 1fr); }
  .nc-avatar-filter-grid         { grid-template-columns: repeat(3, 1fr); }
  .nc-avatar-framing-grid        { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   v2.7.12 — Group composition persons block
   Horizontal scroll of 2..6 cards, each per subject slot.
════════════════════════════════════════════════════════════ */
.nc-avatar-persons-block {
  margin-top: 14px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(0,212,255,0.08), rgba(255,80,180,0.05));
  border: 1px dashed rgba(0,212,255,0.35);
  border-radius: 14px;
}
.nc-avatar-persons-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
  flex-wrap: wrap;
}
.nc-avatar-persons-hd strong { font-size: 13px; font-weight: 700; }
.nc-avatar-persons-hd small  { font-size: 11px; opacity: 0.7; }
.nc-avatar-persons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.nc-avatar-person-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px;
  position: relative;
  transition: all 0.18s ease;
}
.nc-avatar-person-card:hover { background: rgba(255,255,255,0.08); }
.nc-avatar-person--main {
  border-color: rgba(0,212,255,0.55);
  background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(255,255,255,0.04));
}
.nc-avatar-person--photo {
  border-color: rgba(94,255,179,0.55);
  background: linear-gradient(135deg, rgba(94,255,179,0.12), rgba(255,255,255,0.04));
}
.nc-avatar-person--ai {
  border-color: rgba(255,255,255,0.12);
  border-style: dashed;
}
.nc-avatar-person-num {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 11px;
  font-weight: 800;
  opacity: 0.55;
}
.nc-avatar-person-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
}
.nc-avatar-person-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.nc-avatar-person-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nc-avatar-person-thumb--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  opacity: 0.5;
}
.nc-avatar-person-mode-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.5px;
  padding: 2px;
  border-radius: 999px;
  color: #001;
}
.nc-avatar-person--photo .nc-avatar-person-mode-badge {
  background: linear-gradient(90deg, #5effb3, #00d4ff);
}
.nc-avatar-person--ai .nc-avatar-person-mode-badge {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.nc-avatar-person--main .nc-avatar-person-mode-badge {
  background: linear-gradient(90deg, #00d4ff, #ff4dba);
  color: #fff;
}
.nc-avatar-person-body small {
  font-size: 11px;
  opacity: 0.72;
  text-align: center;
}
.nc-avatar-person-actions {
  display: flex;
  gap: 4px;
}
.nc-avatar-person-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nc-avatar-person-btn:hover {
  background: rgba(255,80,80,0.4);
  border-color: rgba(255,80,80,0.6);
}
.nc-avatar-person-upload {
  width: 100%;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(94,255,179,0.18);
  border: 1px solid rgba(94,255,179,0.45);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nc-avatar-person-upload:hover {
  background: rgba(94,255,179,0.32);
  border-color: rgba(94,255,179,0.75);
}
.nc-avatar-persons-hint {
  margin: 10px 0 0;
  font-size: 12px;
  opacity: 0.72;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .nc-avatar-persons-grid { grid-template-columns: repeat(2, 1fr); }
  .nc-avatar-person-thumb { width: 76px; height: 76px; }
}

/* ════════════════════════════════════════════════════════════
   v2.7.13 — Phase 4 styles
   Multi-product grid · scene category tabs · captions modal ·
   art-text photo upload
════════════════════════════════════════════════════════════ */

/* Multi-product grid (replaces single product active card) */
.nc-avatar-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 10px 0 0;
}
.nc-avatar-product-item {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,140,80,0.4);
  border-radius: 12px;
  padding: 8px;
}
.nc-avatar-product-item-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  margin-bottom: 8px;
}
.nc-avatar-product-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nc-avatar-product-item-num {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(0,0,0,0.65);
  padding: 2px 6px;
  border-radius: 999px;
  color: #fff;
}
.nc-avatar-product-item-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 14px;
  background: linear-gradient(90deg, #ff8e3a, #ff4d8d);
  padding: 2px 6px;
  border-radius: 999px;
}
.nc-avatar-product-item-types {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.nc-avatar-product-item-type {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nc-avatar-product-item-type:hover { background: rgba(255,140,80,0.15); }
.nc-avatar-product-item-type.is-active {
  background: linear-gradient(135deg, rgba(255,140,80,0.4), rgba(255,80,180,0.3));
  border-color: rgba(255,140,80,0.85);
}
.nc-avatar-product-item-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s ease;
}
.nc-avatar-product-item-remove:hover { background: rgba(255,80,80,0.85); }
.nc-avatar-product-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 140px;
  background: rgba(255,255,255,0.03);
  border: 2px dashed rgba(255,140,80,0.5);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}
.nc-avatar-product-add:hover {
  background: rgba(255,140,80,0.1);
  border-color: rgba(255,140,80,0.85);
  transform: translateY(-2px);
}
.nc-avatar-product-add-ico { font-size: 32px; font-weight: 700; opacity: 0.85; }
.nc-avatar-product-add-txt { font-size: 12px; font-weight: 700; }

/* Scene category tabs (Lifestyle / Marketing) */
.nc-avatar-scene-cat-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.nc-avatar-scene-cat-tab {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nc-avatar-scene-cat-tab:hover { background: rgba(255,255,255,0.09); }
.nc-avatar-scene-cat-tab.is-active {
  background: linear-gradient(90deg, rgba(255,140,80,0.3), rgba(255,80,180,0.22));
  border-color: rgba(255,140,80,0.7);
  font-weight: 700;
}

/* Captions modal */
.nc-captions-modal {
  max-width: 600px;
}
.nc-captions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 65vh;
  overflow-y: auto;
}
.nc-caption-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
}
.nc-caption-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 13px;
}
.nc-caption-hd > span { flex: 1; }
.nc-caption-body {
  background: rgba(0,0,0,0.35);
  color: #fff !important;
  padding: 12px;
  border-radius: 8px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
}

/* Art Text mode : photo-with-text upload */
.nc-art-text-photo-block {
  background: linear-gradient(135deg, rgba(255,215,0,0.06), rgba(255,80,180,0.04));
  border: 1px dashed rgba(255,215,0,0.35);
  border-radius: 14px;
  padding: 14px;
}
.nc-art-text-photo-drop {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: rgba(255,255,255,0.04);
  border: 2px dashed rgba(255,215,0,0.45);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}
.nc-art-text-photo-drop:hover {
  background: rgba(255,215,0,0.12);
  border-color: rgba(255,215,0,0.85);
  transform: translateY(-1px);
}
.nc-art-text-photo-ico { font-size: 30px; }
.nc-art-text-photo-txt strong { display: block; font-weight: 700; font-size: 14px; }
.nc-art-text-photo-txt small  { font-size: 11px; opacity: 0.72; }
.nc-art-text-photo-hint {
  margin: 10px 0 0;
  font-size: 12px;
  opacity: 0.74;
  line-height: 1.5;
}
.nc-art-text-photo-active {
  display: flex;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255,215,0,0.16), rgba(255,80,180,0.1));
  border: 1px solid rgba(255,215,0,0.5);
  border-radius: 12px;
  padding: 12px;
}
.nc-art-text-photo-thumb {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.nc-art-text-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nc-art-text-photo-badge {
  position: absolute;
  bottom: 4px; left: 4px; right: 4px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 3px;
  background: linear-gradient(90deg, #ffd700, #ff8e3a);
  color: #1a0e00;
  border-radius: 999px;
  letter-spacing: 0.4px;
}
.nc-art-text-photo-body { flex: 1; min-width: 0; }
.nc-art-text-photo-body strong { display: block; font-size: 14px; margin-bottom: 4px; }
.nc-art-text-photo-body p { font-size: 12px; opacity: 0.78; margin: 0 0 8px; line-height: 1.45; }

@media (max-width: 560px) {
  .nc-avatar-product-grid     { grid-template-columns: repeat(2, 1fr); }
  .nc-art-text-photo-active   { flex-direction: column; align-items: stretch; }
  .nc-art-text-photo-thumb    { width: 100%; height: 160px; }
  .nc-avatar-scene-cat-tabs   { flex-direction: column; }
}