/* ═══════════════════════════════════════════════════════════
   LOOM — style.css v5.0
   New: Filter Picker · History Panel · Share Button
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg-base:   #100B1E;
  --bg-card:   rgba(28, 18, 45, 0.72);
  --bg-glass:  rgba(255,255,255,0.035);
  --bg-edge:   rgba(255,255,255,0.072);
  --rose:       #FF6B9D;
  --rose-soft:  #FF8FB3;
  --rose-dim:   rgba(255,107,157,0.16);
  --rose-glow:  rgba(255,107,157,0.30);
  --rose-low:   rgba(255,107,157,0.08);
  --lav:        #C084FC;
  --lav-dim:    rgba(192,132,252,0.18);
  --lav-glow:   rgba(192,132,252,0.28);
  --lav-low:    rgba(192,132,252,0.08);
  --gold:       #FFCC70;
  --gold-dim:   rgba(255,204,112,0.15);
  --gold-glow:  rgba(255,204,112,0.25);
  --sky:        #67D7F5;
  --t-hi:   #FFF0F6;
  --t-mid:  rgba(255,224,240,0.68);
  --t-low:  rgba(255,200,225,0.38);
  --t-xlow: rgba(255,180,210,0.20);
  --ok:       #4DFFB4;
  --err:      #FF637A;
  --err-bg:   rgba(255,99,122,0.08);
  --err-edge: rgba(255,99,122,0.24);
  --r1:4px; --r2:10px; --r3:16px; --r4:22px; --r5:30px; --pill:999px;
  --sh1: 0 2px 12px rgba(0,0,0,0.35);
  --sh2: 0 8px 30px  rgba(0,0,0,0.50);
  --sh3: 0 20px 56px rgba(0,0,0,0.60);
  --sh-rose: 0 8px 30px var(--rose-glow);
  --spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-o:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-io: cubic-bezier(0.4,  0, 0.2,  1);
  --fnt-display: 'Nunito',  sans-serif;
  --fnt-ar:      'Cairo',   sans-serif;
  --fnt-en:      'Nunito',  sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img    { display: block; max-width: 100%; }

body {
  background: var(--bg-base);
  font-family: var(--fnt-ar);
  color: var(--t-hi);
  min-height: 100vh; min-height: 100dvh;
  display: flex; justify-content: center; align-items: flex-start;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
[dir="ltr"] body { font-family: var(--fnt-en); }

/* ── BACKGROUND ───────────────────────────────────────────── */
.scene { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.scene__orb { position:absolute; border-radius:50%; filter:blur(110px); will-change:transform; }
.scene__orb--a { width:600px; height:600px; background:radial-gradient(circle,rgba(192,84,252,0.38) 0%,transparent 65%); top:-200px; left:-200px; animation:orbFloat 26s ease-in-out infinite alternate; }
.scene__orb--b { width:500px; height:500px; background:radial-gradient(circle,rgba(255,107,157,0.30) 0%,transparent 65%); bottom:-100px; right:-160px; animation:orbFloat 32s ease-in-out infinite alternate-reverse; }
.scene__orb--c { width:350px; height:350px; background:radial-gradient(circle,rgba(255,204,112,0.18) 0%,transparent 65%); top:38%; left:42%; transform:translate(-50%,-50%); animation:orbPulse 20s ease-in-out infinite; }
.scene__orb--d { width:260px; height:260px; background:radial-gradient(circle,rgba(103,215,245,0.12) 0%,transparent 65%); top:60%; right:5%; animation:orbFloat 22s ease-in-out infinite alternate; animation-delay:-8s; }
@keyframes orbFloat { from{transform:translate(0,0) scale(1);} to{transform:translate(22px,18px) scale(1.07);} }
@keyframes orbPulse  { 0%,100%{opacity:.15;transform:translate(-50%,-50%) scale(1);} 50%{opacity:.32;transform:translate(-50%,-50%) scale(1.28);} }

.scene__sparkles { position:absolute; inset:0; }
.sp { position:absolute; color:var(--rose-soft); animation:sparkle infinite ease-in-out; font-size:12px; }
.sp-1{top:8%;left:12%;animation-duration:4s;animation-delay:0s;opacity:.5;}
.sp-2{top:22%;right:14%;animation-duration:5s;animation-delay:-1s;opacity:.4;color:var(--lav);}
.sp-3{top:55%;left:7%;animation-duration:6s;animation-delay:-2s;opacity:.45;}
.sp-4{bottom:28%;right:9%;animation-duration:4.5s;animation-delay:-0.5s;opacity:.4;color:var(--gold);}
.sp-5{top:35%;left:80%;animation-duration:5.5s;animation-delay:-3s;opacity:.6;font-size:6px;color:var(--t-low);}
.sp-6{bottom:15%;left:15%;animation-duration:4s;animation-delay:-1.5s;opacity:.5;font-size:6px;}
.sp-7{top:72%;right:20%;animation-duration:7s;animation-delay:-4s;opacity:.35;color:var(--lav);font-size:14px;}
.sp-8{top:12%;left:55%;animation-duration:5s;animation-delay:-2.5s;opacity:.3;font-size:8px;color:var(--gold);}
@keyframes sparkle { 0%,100%{transform:scale(1) rotate(0deg);opacity:.3;} 50%{transform:scale(1.4) rotate(20deg);opacity:.8;} }

.social-float { position:fixed; inset:0; z-index:1; pointer-events:none; }
.social-float i { position:absolute; opacity:.05; animation:sfFloat infinite ease-in-out; }
.sf-1{top:6%;left:6%;font-size:20px;color:var(--rose);animation-duration:17s;}
.sf-2{top:19%;right:7%;font-size:17px;color:var(--lav);animation-duration:23s;}
.sf-3{top:43%;left:4%;font-size:24px;color:var(--gold);animation-duration:27s;animation-delay:-6s;}
.sf-4{bottom:29%;right:5%;font-size:22px;color:var(--rose);animation-duration:20s;animation-delay:-10s;}
.sf-5{top:67%;left:8%;font-size:19px;color:var(--sky);animation-duration:31s;animation-delay:-4s;}
.sf-6{bottom:7%;right:9%;font-size:25px;color:var(--lav);animation-duration:24s;animation-delay:-15s;}
@keyframes sfFloat { 0%,100%{transform:translate(0,0) rotate(0deg);} 33%{transform:translate(7px,-14px) rotate(5deg);} 66%{transform:translate(-4px,-7px) rotate(-3deg);} }

/* ── LOADING VEIL ─────────────────────────────────────────── */
.loading-veil { position:fixed; inset:0; z-index:300; background:rgba(16,11,30,0.92); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); display:flex; align-items:center; justify-content:center; }
.lv__card { display:flex; flex-direction:column; align-items:center; gap:14px; padding:36px 28px; max-width:300px; width:90%; background:var(--bg-card); border:1px solid rgba(255,107,157,0.14); border-radius:var(--r4); box-shadow:0 0 60px rgba(192,84,252,0.15),var(--sh3); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); animation:cardPop .5s var(--spring) both; }
@keyframes cardPop { from{transform:scale(.85);opacity:0;} to{transform:scale(1);opacity:1;} }
.lv__spinner { position:relative; width:72px; height:72px; }
.lv__ring { width:100%; height:100%; transform:rotate(-90deg); }
.lv__track { fill:none; stroke:rgba(255,255,255,0.06); stroke-width:2.5; }
.lv__arc { fill:none; stroke-width:2.5; stroke-linecap:round; }
.lv__arc--1 { stroke:var(--rose); stroke-dasharray:176; stroke-dashoffset:176; animation:arcSpin1 1.4s var(--ease-io) infinite; }
.lv__arc--2 { stroke:var(--lav); stroke-dasharray:126; stroke-dashoffset:126; animation:arcSpin2 1s var(--ease-io) infinite reverse; }
@keyframes arcSpin1{0%{stroke-dashoffset:176;}50%{stroke-dashoffset:0;}100%{stroke-dashoffset:-176;}}
@keyframes arcSpin2{0%{stroke-dashoffset:126;}50%{stroke-dashoffset:0;}100%{stroke-dashoffset:-126;}}
.lv__emoji { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:22px; animation:emojiPop 1.8s ease-in-out infinite; }
@keyframes emojiPop { 0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-50%,-50%) scale(1.3);} }
.lv__title { font-size:17px; font-weight:700; color:var(--t-hi); text-align:center; line-height:1.5; }
.lv__sub { font-size:12.5px; color:var(--t-low); text-align:center; animation:breathe 2.2s ease-in-out infinite; }
@keyframes breathe{0%,100%{opacity:.4;}50%{opacity:1;}}
.lv__steps { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.lv__step { font-size:11.5px; padding:5px 13px; border-radius:var(--pill); background:var(--bg-glass); border:1px solid var(--bg-edge); color:var(--t-low); transition:all .4s var(--ease-o); }
.lv__step.active { background:var(--rose-dim); border-color:var(--rose); color:var(--rose-soft); box-shadow:0 0 14px var(--rose-glow); }

/* ── CREDIT BADGE ─────────────────────────────────────────── */
.credit-badge { position:fixed; top:16px; left:16px; z-index:200; display:flex; align-items:center; gap:7px; padding:8px 16px; border-radius:var(--pill); background:rgba(255,107,157,0.09); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,107,157,0.22); color:var(--rose-soft); font-weight:800; font-size:13px; letter-spacing:.02em; box-shadow:var(--sh1); transition:all .3s var(--ease-io); }
[dir="ltr"] .credit-badge { left:auto; right:16px; }
.credit-badge__icon { font-size:11px; filter:drop-shadow(0 0 5px var(--rose)); animation:boltGlow 3s ease-in-out infinite; }
@keyframes boltGlow { 0%,100%{filter:drop-shadow(0 0 3px var(--rose));} 50%{filter:drop-shadow(0 0 9px var(--rose));} }
.credit-badge.deduct { color:var(--err); border-color:var(--err-edge); background:var(--err-bg); transform:scale(1.08); box-shadow:0 0 22px var(--err-bg); }

/* ── HISTORY BUTTON ───────────────────────────────────────── */
.history-btn {
  position: fixed; top: 16px; right: 16px; z-index: 200;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(192,132,252,0.10);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(192,132,252,0.22);
  color: var(--lav); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s var(--ease-o);
  box-shadow: var(--sh1);
}
[dir="ltr"] .history-btn { right: auto; left: 16px; }
.history-btn:hover { background: var(--lav-dim); transform: scale(1.10); box-shadow: 0 0 20px var(--lav-glow); }

/* ── HISTORY PANEL ────────────────────────────────────────── */
.history-panel {
  position: fixed; inset: 0; z-index: 400;
  pointer-events: none; opacity: 0;
  transition: opacity .3s var(--ease-io);
}
.history-panel.open {
  pointer-events: all; opacity: 1;
}
.history-panel__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 6, 20, 0.70);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.history-panel__sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  max-width: 460px; margin: 0 auto;
  background: rgba(22, 14, 36, 0.97);
  border-top: 1px solid rgba(192,132,252,0.18);
  border-radius: var(--r4) var(--r4) 0 0;
  padding: 20px 20px 36px;
  max-height: 72vh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform .45s var(--spring);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 -20px 60px rgba(192,84,252,0.15);
}
.history-panel.open .history-panel__sheet {
  transform: translateY(0);
}
.history-panel__header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bg-edge);
}
.history-panel__title {
  font-size: 16px; font-weight: 800; color: var(--t-hi);
}
.history-panel__close {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-glass); border: 1px solid var(--bg-edge);
  color: var(--t-low); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease-io);
}
.history-panel__close:hover { background: var(--rose-dim); color: var(--rose); }

.history-panel__list { display: flex; flex-direction: column; gap: 12px; }

/* Single history item */
.history-item {
  display: flex; gap: 12px; align-items: center;
  padding: 12px; border-radius: var(--r3);
  background: var(--bg-glass); border: 1px solid var(--bg-edge);
  cursor: pointer;
  transition: all .25s var(--ease-o);
  animation: cardIn .4s var(--spring) both;
}
.history-item:hover { border-color: rgba(192,132,252,0.28); background: var(--lav-low); transform: translateX(-3px); }
[dir="ltr"] .history-item:hover { transform: translateX(3px); }
.history-item__thumb {
  width: 56px; height: 56px; border-radius: var(--r2);
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
}
.history-item__info { flex: 1; min-width: 0; }
.history-item__caption {
  font-size: 12.5px; color: var(--t-mid);
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.history-item__meta {
  font-size: 11px; color: var(--t-low);
  margin-top: 5px; display: flex; gap: 8px; align-items: center;
}
.history-item__meta i { font-size: 10px; color: var(--lav); }
.history-item__delete {
  width: 28px; height: 28px; border-radius: 50%;
  background: none; border: none;
  color: var(--t-xlow); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s;
}
.history-item__delete:hover { color: var(--err); background: var(--err-bg); }

.history-panel__empty {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  padding: 36px 20px; color: var(--t-low);
  font-size: 14px; text-align: center; line-height: 1.7;
}
.history-panel__empty span { font-size: 36px; }

/* ── SHELL ────────────────────────────────────────────────── */
.shell { position:relative; z-index:5; width:100%; max-width:460px; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; padding:52px 22px 36px; gap:14px; }

/* ── BRAND HEADER ─────────────────────────────────────────── */
.brand-header { text-align:center; padding-bottom:0; }
.brand-logo-wrap { display:flex; justify-content:center; align-items:center; margin-bottom:0; line-height:0; }
.brand-logo { height:120px; width:auto; max-width:340px; display:block; margin-bottom:0; filter:drop-shadow(0 0 22px rgba(255,107,157,0.35)) drop-shadow(0 0 48px rgba(192,132,252,0.20)); animation:logoBreathe 4s ease-in-out infinite; transition:filter .4s ease; }
.brand-logo:hover { filter:drop-shadow(0 0 32px rgba(255,107,157,0.55)) drop-shadow(0 0 60px rgba(192,132,252,0.35)); }
@keyframes logoBreathe { 0%,100%{filter:drop-shadow(0 0 18px rgba(255,107,157,0.30)) drop-shadow(0 0 40px rgba(192,132,252,0.15));transform:scale(1);} 50%{filter:drop-shadow(0 0 28px rgba(255,107,157,0.50)) drop-shadow(0 0 56px rgba(192,132,252,0.30));transform:scale(1.02);} }
.brand-header__tagline { font-family:var(--fnt-display); font-size:11px; font-weight:600; letter-spacing:.10em; text-transform:uppercase; color:var(--t-low); line-height:1.7; margin-top:-6px; }
[dir="ltr"] .brand-header__tagline { font-family:var(--fnt-en); }

/* ── STEP PROGRESS ────────────────────────────────────────── */
.step-thread { position:relative; padding:10px 0; }
.step-thread__rail { position:absolute; top:50%; left:20px; right:20px; height:2px; background:rgba(255,255,255,0.07); border-radius:var(--pill); transform:translateY(-50%); z-index:1; }
.step-thread__fill { height:100%; width:0%; background:linear-gradient(90deg,var(--rose),var(--lav),var(--gold)); background-size:200% 100%; border-radius:var(--pill); transition:width .7s var(--spring); box-shadow:0 0 18px var(--rose-glow); animation:threadShimmer 3s linear infinite; }
[dir="rtl"] .step-thread__fill { background:linear-gradient(270deg,var(--rose),var(--lav),var(--gold)); background-size:200% 100%; }
@keyframes threadShimmer{0%{background-position:0% 0%;}100%{background-position:-200% 0%;}}
.step-thread__nodes { position:relative; display:flex; justify-content:space-between; z-index:2; }
.stn { width:38px; height:38px; background:rgba(16,11,30,0.95); border:1.5px solid rgba(255,255,255,0.08); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--t-low); transition:all .5s var(--spring); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); outline:none; line-height:1; }
.stn.active { border-color:var(--rose); color:var(--t-hi); transform:scale(1.22); box-shadow:0 0 0 5px var(--rose-low),0 0 22px var(--rose-glow); }
.stn.done { background:linear-gradient(135deg,var(--rose) 0%,var(--lav) 100%); border-color:transparent; color:#fff; box-shadow:0 0 18px var(--rose-glow); }

/* ── STEPS ────────────────────────────────────────────────── */
.step { width:100%; transform-origin:center top; will-change:transform,opacity; }
.step__title { text-align:center; color:var(--t-mid); font-size:15px; font-weight:500; line-height:1.85; margin-bottom:22px; letter-spacing:.01em; }
[dir="ltr"] .step__title { font-family:var(--fnt-en); }
@keyframes stepIn  { from{opacity:0;transform:translateY(44px) scale(.96);filter:blur(8px);} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);} }
@keyframes stepOut { from{opacity:1;transform:translateY(0) scale(1);filter:blur(0);} to{opacity:0;transform:translateY(-26px) scale(.93);filter:blur(10px);} }
.step--in  { animation:stepIn  .65s var(--spring) both; }
.step--out { animation:stepOut .36s var(--ease-o)  both; }

/* ── CHOICE GRID ──────────────────────────────────────────── */
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.choice-card { padding:24px 14px 20px; background:var(--bg-card); border:1px solid var(--bg-edge); border-radius:var(--r4); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--t-hi); font-family:var(--fnt-ar); transition:all .3s var(--ease-o); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); position:relative; overflow:hidden; cursor:pointer; }
[dir="ltr"] .choice-card { font-family:var(--fnt-en); }
.choice-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 20%,rgba(255,107,157,0.07) 50%,transparent 80%); opacity:0; border-radius:inherit; pointer-events:none; transition:opacity .3s var(--ease-io); }
.choice-card:hover::before{opacity:1;}
.choice-card:hover { border-color:rgba(255,107,157,0.32); transform:translateY(-3px) scale(1.01); box-shadow:0 8px 28px rgba(255,107,157,0.14); }
.choice-card:active{transform:scale(.97);}
.choice-card__flag  { font-size:30px; line-height:1; }
.choice-card__label { font-size:17px; font-weight:800; }
.choice-card__sub   { font-size:11px; color:var(--t-low); letter-spacing:.04em; }

/* ── UPLOAD ZONE ──────────────────────────────────────────── */
.upload-zone { width:100%; }
.upload-zone__label { display:flex; flex-direction:column; align-items:center; gap:14px; padding:44px 28px; background:var(--bg-card); border:1.5px dashed rgba(255,107,157,0.28); border-radius:var(--r5); cursor:pointer; transition:all .35s var(--ease-o); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); position:relative; overflow:hidden; }
.upload-zone__label::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(255,107,157,0.09) 0%,transparent 65%); opacity:0; border-radius:inherit; pointer-events:none; transition:opacity .35s var(--ease-io); }
.upload-zone__label:hover::after{opacity:1;}
.upload-zone__label:hover { border-color:rgba(255,107,157,0.55); transform:translateY(-2px); box-shadow:var(--sh2),0 0 48px var(--rose-glow); }
.upload-zone__label:active{transform:scale(.98);}
.upload-zone__ring { width:66px; height:66px; border-radius:50%; background:var(--rose-low); border:1px solid rgba(255,107,157,0.22); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--rose-soft); transition:all .35s var(--spring); }
.upload-zone__label:hover .upload-zone__ring { transform:scale(1.12); box-shadow:0 0 28px var(--rose-glow); }
.upload-zone__main { font-size:18px; font-weight:800; color:var(--t-hi); }
.upload-zone__pill { font-size:11.5px; color:var(--t-low); background:var(--rose-low); border:1px solid rgba(255,107,157,0.14); padding:4px 15px; border-radius:var(--pill); }

/* ── ALERT ────────────────────────────────────────────────── */
.alert { display:flex; gap:13px; align-items:flex-start; padding:18px; border-radius:var(--r3); font-size:14px; line-height:1.75; animation:stepIn .4s var(--spring) both; }
.alert--warn { background:var(--err-bg); border:1px solid var(--err-edge); color:var(--err); }
.alert i{font-size:18px;flex-shrink:0;margin-top:2px;}
.alert strong{display:block;margin-bottom:3px;}
.alert p{color:var(--t-mid);font-size:13px;}

/* ── IMAGE WRAP ───────────────────────────────────────────── */
.img-wrap { position:relative; border-radius:var(--r4); overflow:hidden; box-shadow:var(--sh3); border:1px solid rgba(255,255,255,0.06); margin-top:4px; }
#previewImg { width:100%; border-radius:var(--r4); transition:filter 1.2s var(--ease-o); }
.img-wrap__badge { position:absolute; bottom:12px; right:12px; background:rgba(16,11,30,0.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.08); border-radius:var(--pill); padding:5px 14px; gap:6px; display:flex; align-items:center; font-size:11px; font-weight:700; color:var(--rose-soft); letter-spacing:.06em; font-family:var(--fnt-display); animation:badgePop .5s var(--spring) both; }
[dir="ltr"] .img-wrap__badge{right:auto;left:12px;}
@keyframes badgePop{from{transform:scale(.6) translateY(6px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}

/* ══════════════════════════════════════════════════════════
   FILTER PICKER  🎨
   ══════════════════════════════════════════════════════════ */
.filter-picker {
  margin-top: 14px;
  animation: cardIn .5s var(--spring) both;
}
.filter-picker__label {
  font-size: 13px; font-weight: 700; color: var(--t-mid);
  margin-bottom: 10px; text-align: center;
}
.filter-picker__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.filter-thumb {
  border-radius: var(--r3);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .28s var(--spring);
  position: relative;
  background: var(--bg-glass);
}
.filter-thumb:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255,107,157,0.20);
}
.filter-thumb.selected {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--rose-dim), 0 8px 24px var(--rose-glow);
  transform: translateY(-3px) scale(1.03);
}
.filter-thumb img {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; display: block;
  pointer-events: none;
}
.filter-thumb__name {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(16,11,30,0.92) 0%, transparent 100%);
  font-size: 10px; font-weight: 700;
  color: var(--t-hi); text-align: center;
  padding: 12px 4px 5px;
  letter-spacing: .04em;
  font-family: var(--fnt-display);
}
.filter-thumb__check {
  position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--rose); color: #fff; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0);
  transition: all .25s var(--spring);
}
[dir="ltr"] .filter-thumb__check { right: auto; left: 5px; }
.filter-thumb.selected .filter-thumb__check { opacity: 1; transform: scale(1); }

/* ── RESULT DECK ──────────────────────────────────────────── */
.result-deck { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.r-card { background:var(--bg-card); border:1px solid var(--bg-edge); border-radius:var(--r3); padding:16px 18px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); transition:border-color .3s var(--ease-io); }
.r-card:hover{border-color:rgba(255,107,157,0.18);}
.r-card:nth-child(1){animation:cardIn .55s var(--spring) .04s both;}
.r-card:nth-child(2){animation:cardIn .55s var(--spring) .11s both;}
.r-card:nth-child(3){animation:cardIn .55s var(--spring) .18s both;}
.r-card:nth-child(4){animation:cardIn .55s var(--spring) .25s both;}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.r-card__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.r-card__label { display:flex; align-items:center; gap:8px; font-family:var(--fnt-display); font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--rose-soft); }
[dir="ltr"] .r-card__label{font-family:var(--fnt-en);}
.r-card__ico{font-size:14px;}
.r-card__body { font-size:14.5px; line-height:1.85; color:var(--t-mid); direction:auto; word-break:break-word; }
.r-card__body--tags { color:var(--lav); font-weight:600; font-size:13.5px; letter-spacing:.01em; }
.pulse-load{animation:skelPulse 1.6s ease-in-out infinite;}
@keyframes skelPulse{0%,100%{opacity:.3;}50%{opacity:.7;}}

.copy-btn { width:32px; height:32px; border-radius:var(--r1); background:var(--bg-glass); border:1px solid var(--bg-edge); color:var(--t-low); font-size:13px; display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease-io); flex-shrink:0; }
.copy-btn:hover { background:var(--rose-low); border-color:rgba(255,107,157,0.28); color:var(--rose-soft); transform:scale(1.12); }
.copy-btn.copied { background:rgba(77,255,180,0.08); border-color:rgba(77,255,180,0.24); color:var(--ok); }

#audioWrap{margin-top:12px;}
audio { width:100%; height:36px; border-radius:var(--r2); outline:none; opacity:.6; filter:invert(.85) hue-rotate(295deg) saturate(.7); }

/* ── ACTION ROW — now 3 buttons ───────────────────────────── */
.action-row { display:flex; gap:9px; margin-top:18px; padding-bottom:8px; }
.btn { flex:1; padding:14px 10px; border-radius:var(--r3); font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:7px; transition:all .3s var(--ease-o); -webkit-tap-highlight-color:transparent; }
[dir="ltr"] .btn{font-family:var(--fnt-en);}
[dir="rtl"] .btn{font-family:var(--fnt-ar);}

.btn--primary { background:linear-gradient(135deg,var(--rose) 0%,var(--lav) 100%); border:1px solid rgba(255,107,157,0.30); color:#fff; box-shadow:var(--sh-rose); text-shadow:0 1px 6px rgba(0,0,0,0.20); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 12px 38px var(--rose-glow),0 0 0 1px rgba(255,107,157,0.2); filter:brightness(1.08); }
.btn--primary:active{transform:scale(.97);}

/* Share button — gold accent */
.btn--share { background:linear-gradient(135deg, var(--gold) 0%, rgba(255,204,112,0.55) 100%); border:1px solid rgba(255,204,112,0.30); color:#1a0e00; box-shadow:0 8px 30px var(--gold-glow); font-weight:800; }
.btn--share:hover { transform:translateY(-2px); box-shadow:0 12px 36px var(--gold-glow); filter:brightness(1.08); }
.btn--share:active{transform:scale(.97);}

.btn--ghost { background:var(--bg-glass); border:1px solid var(--bg-edge); color:var(--t-mid); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.btn--ghost:hover { background:rgba(255,255,255,0.055); border-color:rgba(255,255,255,0.13); color:var(--t-hi); transform:translateY(-1px); }
.btn--ghost:active{transform:scale(.97);}

/* ── FOOTER ───────────────────────────────────────────────── */
.shell__footer { text-align:center; font-size:12px; color:var(--t-xlow); letter-spacing:.08em; font-family:var(--fnt-display); padding-top:8px; margin-top:auto; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-thumb{background:rgba(255,107,157,0.18);border-radius:var(--pill);}

/* ══════════════════════════════════════════════════════════
   INTRO SPLASH
   ══════════════════════════════════════════════════════════ */
.intro-splash { position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center; animation:splashExit 0.7s var(--ease-o) 2.6s both; pointer-events:none; }
.intro-splash__bg { position:absolute; inset:0; background:var(--bg-base); animation:splashBgFade 0.7s var(--ease-o) 2.6s both; }
@keyframes splashBgFade{from{opacity:1;}to{opacity:0;}}
@keyframes splashExit{from{opacity:1;pointer-events:all;}to{opacity:0;pointer-events:none;}}
.intro-splash__content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:20px; }
.intro-splash__logo-ring { position:relative; width:160px; height:160px; display:flex; align-items:center; justify-content:center; }
.intro-splash__ring { position:absolute; border-radius:50%; border:1.5px solid transparent; }
.ring-a { width:160px; height:160px; border-color:rgba(255,107,157,0.35); animation:ringExpand 2s var(--ease-o) 0.1s both, ringRotate 8s linear infinite; }
.ring-b { width:130px; height:130px; border-color:rgba(192,132,252,0.30); animation:ringExpand 2s var(--ease-o) 0.2s both, ringRotate 6s linear infinite reverse; }
.ring-c { width:100px; height:100px; border-color:rgba(255,204,112,0.25); animation:ringExpand 2s var(--ease-o) 0.3s both, ringRotate 10s linear infinite; }
@keyframes ringExpand{0%{transform:scale(0.3);opacity:0;}60%{opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes ringRotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.intro-splash__logo { position:relative; z-index:3; width:160px; height:auto; object-fit:contain; animation:logoIntro 1s var(--spring) 0.3s both; filter:drop-shadow(0 0 30px rgba(255,107,157,0.60)) drop-shadow(0 0 60px rgba(192,132,252,0.40)); }
@keyframes logoIntro{0%{transform:scale(0.4) rotate(-8deg);opacity:0;filter:blur(12px);}60%{transform:scale(1.08) rotate(2deg);opacity:1;}100%{transform:scale(1) rotate(0deg);opacity:1;}}
.intro-splash__sparkles { position:absolute; inset:-30px; pointer-events:none; }
.is-sp { position:absolute; font-size:14px; opacity:0; animation:spPop 0.5s var(--spring) both; }
.is-sp-1{top:5%;left:15%;color:var(--rose);animation-delay:0.7s;}
.is-sp-2{top:5%;right:15%;color:var(--lav);animation-delay:0.85s;font-size:10px;}
.is-sp-3{bottom:5%;left:20%;color:var(--gold);animation-delay:0.9s;}
.is-sp-4{bottom:5%;right:20%;color:var(--rose);animation-delay:0.75s;font-size:18px;}
.is-sp-5{top:50%;left:2%;color:var(--lav);animation-delay:1s;font-size:8px;}
.is-sp-6{top:50%;right:2%;color:var(--gold);animation-delay:0.95s;font-size:8px;}
@keyframes spPop{0%{transform:scale(0) rotate(-20deg);opacity:0;}60%{transform:scale(1.4) rotate(10deg);opacity:1;}100%{transform:scale(1) rotate(0deg);opacity:0.8;}}
.intro-splash__tagline { font-family:var(--fnt-display); font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--t-low); animation:taglineIn 0.8s var(--ease-o) 0.9s both; }
@keyframes taglineIn{from{opacity:0;transform:translateY(10px) scale(0.95);letter-spacing:0.35em;}to{opacity:1;transform:translateY(0) scale(1);letter-spacing:0.18em;}}
.shell, .credit-badge, .social-float, .history-btn { animation:contentReveal 0.6s var(--ease-o) 2.8s both; }
@keyframes contentReveal{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:480px) {
  .shell{padding:48px 16px 28px;gap:12px;}
  .credit-badge{top:12px;left:12px;padding:6px 12px;font-size:12px;}
  [dir="ltr"] .credit-badge{left:auto;right:12px;}
  .history-btn{top:12px;right:12px;}
  [dir="ltr"] .history-btn{right:auto;left:12px;}
  .choice-card{padding:20px 10px 16px;}
  .brand-header__tagline{font-size:10px;}
  .upload-zone__label{padding:32px 20px;}
  .btn{font-size:12px;padding:13px 8px;}
}
@media (max-height:680px){
  .shell{justify-content:flex-start;padding-top:64px;}
  .upload-zone__label{padding:26px 20px;}
}