:root {
  font-family: "Tajawal", system-ui, sans-serif;
  color: #f7f5fb;
  background: #090811;
  font-synthesis: none;
  --ink: #090811;
  --surface: #11101a;
  --muted: #9d99aa;
  --card: rgba(255,255,255,.052);
  --border: rgba(255,255,255,.105);
  --violet: #8b5cf6;
  --lilac: #b9a1ff;
  --mint: #67e8c5;
  --coral: #ff7a8a;
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; min-width: 320px; min-height: 100vh; background:
  radial-gradient(circle at 50% -12%, rgba(139,92,246,.26), transparent 33%),
  radial-gradient(circle at -8% 80%, rgba(103,232,197,.07), transparent 29%),
  radial-gradient(circle at 110% 48%, rgba(185,161,255,.06), transparent 25%),
  var(--ink); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.11; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
.app-shell { min-height: 100dvh; display: grid; place-items: center; padding: 22px; }
.screen { width: min(100%, 560px); animation: enter .42s cubic-bezier(.2,.8,.2,1); }
@keyframes enter { from { opacity:0; transform:translateY(12px) scale(.985);} to {opacity:1; transform:none;} }
.logo { display:flex; align-items:center; gap:11px; font-weight:900; font-size:18px; letter-spacing:-.45px; margin-bottom:36px; }
.logo-mark { position:relative; width:35px; height:35px; display:grid; place-items:center; border:1px solid rgba(185,161,255,.22); border-radius:12px; background:linear-gradient(145deg,rgba(139,92,246,.16),rgba(103,232,197,.045)); box-shadow:inset 0 0 24px rgba(139,92,246,.08),0 8px 30px rgba(0,0,0,.18); overflow:hidden; }
.logo-mark::before,.logo-mark::after { content:""; position:absolute; border:1.5px solid var(--lilac); border-radius:50%; width:16px; height:23px; top:5px; }
.logo-mark::before { right:7px; border-left-color:transparent; transform:rotate(-8deg); }
.logo-mark::after { left:7px; border-right-color:transparent; transform:rotate(8deg); }
.logo-mark i { width:4px; height:4px; background:var(--mint); border-radius:50%; box-shadow:0 0 12px var(--mint); z-index:2; }
.eyebrow { color:var(--lilac); font-size:14px; font-weight:800; margin-bottom:10px; }
.mint { color:var(--mint); }
h1,h2,p { margin-top:0; }
h1 { font-size:clamp(40px,10vw,64px); line-height:.98; letter-spacing:-2.4px; margin-bottom:18px; }
h2 { font-size:clamp(29px,7vw,41px); line-height:1.15; letter-spacing:-1.25px; margin-bottom:14px; }
.lead { font-size:18px; line-height:1.82; color:#c8c5d0; margin-bottom:28px; }
.small { color:var(--muted); font-size:13px; line-height:1.7; }
.center { text-align:center; }
.card { background:linear-gradient(180deg,rgba(255,255,255,.068),rgba(255,255,255,.032)); border:1px solid var(--border); border-radius:24px; padding:20px; box-shadow:0 24px 80px rgba(0,0,0,.25); backdrop-filter:blur(18px); }
.activation { display:grid; gap:12px; margin-top:22px; }
.code-input { width:100%; border:1px solid var(--border); outline:none; background:rgba(0,0,0,.27); color:white; padding:17px 18px; border-radius:16px; text-align:center; direction:ltr; letter-spacing:2.4px; text-transform:uppercase; font-weight:800; transition:.2s; }
.code-input:focus { border-color:rgba(185,161,255,.67); box-shadow:0 0 0 4px rgba(139,92,246,.09); }
.primary { width:100%; border:0; color:#090811; font-weight:900; padding:17px 20px; border-radius:16px; background:linear-gradient(128deg,#efe9ff 0%,#b9a1ff 37%,#8b5cf6 68%,#67e8c5 130%); box-shadow:0 15px 42px rgba(139,92,246,.24); transition:.2s; }
.primary:hover { transform:translateY(-1px); box-shadow:0 18px 48px rgba(139,92,246,.29); }
.primary:active { transform:scale(.985); }
.error { min-height:21px; color:var(--coral); font-size:13px; text-align:center; }
.pills { display:flex; gap:8px; flex-wrap:wrap; margin:24px 0; }
.pill { border:1px solid var(--border); background:var(--card); color:#cac6d4; padding:8px 11px; border-radius:999px; font-size:12px; }
.narrator { color:#cbbcff; font-size:14px; font-weight:700; margin-bottom:18px; min-height:22px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:28px; }
.progress-wrap { flex:1; height:7px; background:rgba(255,255,255,.075); border-radius:999px; overflow:hidden; }
.progress { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--violet),var(--lilac),var(--mint)); transition:width .38s ease; }
.progress-count { font-size:12px; color:var(--muted); direction:ltr; }
.question { font-size:26px; line-height:1.52; font-weight:800; letter-spacing:-.75px; margin-bottom:22px; }
.answers { display:grid; gap:10px; }
.answer { position:relative; display:flex; align-items:flex-start; gap:11px; width:100%; text-align:right; color:#f1eff5; border:1px solid var(--border); background:rgba(255,255,255,.043); padding:17px 16px; border-radius:17px; line-height:1.58; transition:.18s ease; }
.answer-dot { flex:0 0 auto; width:7px; height:7px; margin-top:8px; border-radius:50%; background:rgba(185,161,255,.35); transition:.18s; }
.answer:hover { border-color:rgba(185,161,255,.42); background:rgba(139,92,246,.075); transform:translateY(-1px); }
.answer:hover .answer-dot { background:var(--lilac); box-shadow:0 0 13px rgba(185,161,255,.55); }
.answer.selected { border-color:rgba(103,232,197,.5); background:rgba(103,232,197,.09); transform:scale(.993); }
.answer.selected .answer-dot { background:var(--mint); box-shadow:0 0 14px rgba(103,232,197,.6); }
.unlock { text-align:center; }
.unlock-icon { width:76px; height:76px; display:grid; place-items:center; margin:0 auto 20px; border-radius:25px; font-size:31px; background:linear-gradient(145deg,rgba(139,92,246,.2),rgba(103,232,197,.085)); border:1px solid rgba(185,161,255,.3); box-shadow:0 0 58px rgba(139,92,246,.16); }
.result-card { overflow:hidden; position:relative; }
.result-card::before { content:""; position:absolute; width:190px; height:190px; border-radius:50%; background:rgba(139,92,246,.18); filter:blur(52px); top:-110px; left:-75px; }
.result-badge { display:inline-flex; padding:8px 12px; border-radius:999px; background:rgba(103,232,197,.095); border:1px solid rgba(103,232,197,.2); color:#91efd7; font-size:12px; font-weight:800; margin-bottom:18px; }
.result-body { color:#d8d4de; line-height:1.92; font-size:17px; }
.reflection { margin-top:18px; padding-top:18px; border-top:1px solid var(--border); color:#bdb8c5; line-height:1.82; }
.footer-note { text-align:center; color:#74717e; font-size:11px; line-height:1.65; margin-top:16px; }
.stage-list { display:grid; gap:10px; margin:24px 0; }
.stage-row { position:relative; display:flex; align-items:center; gap:13px; padding:14px 15px; border:1px solid var(--border); border-radius:16px; background:var(--card); color:#dad6e0; }
.stage-row.locked { opacity:.36; }
.stage-num { width:31px; height:31px; border-radius:10px; display:grid; place-items:center; background:rgba(139,92,246,.11); color:#cfbfff; font-weight:900; font-size:12px; }
.stage-state { margin-right:auto; color:var(--mint); font-size:11px; font-weight:800; }
.stage-row.locked .stage-state { color:#aaa5b2; }
.stage-kicker { display:flex; align-items:center; gap:10px; color:var(--lilac); font-size:13px; font-weight:800; margin-bottom:13px; }
.stage-kicker span { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; background:rgba(139,92,246,.12); }
.chapter-card { display:flex; align-items:center; gap:22px; margin:10px 0 28px; padding:16px 17px; border:1px solid var(--border); border-radius:18px; background:var(--card); }
.chapter-card strong { display:block; margin-top:2px; }
.chapter-line { width:3px; align-self:stretch; min-height:42px; border-radius:999px; background:linear-gradient(var(--violet),var(--mint)); }
.spacer { height:14px; }
.trait-card { display:grid; gap:18px; }
.trait-row { display:grid; gap:8px; }
.trait-head { display:flex; align-items:center; justify-content:space-between; font-size:14px; color:#dcd8e2; }
.trait-head b { color:#f8f6fb; font-variant-numeric:tabular-nums; }
.trait-track { height:7px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.trait-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--violet),var(--lilac),var(--mint)); }
.insight-box { display:flex; gap:12px; margin:16px 0 24px; padding:16px; border:1px solid rgba(103,232,197,.13); border-radius:18px; background:rgba(103,232,197,.045); color:#c8c4ce; }
.insight-box p { margin:5px 0 0; font-size:13px; line-height:1.8; }
.insight-dot { flex:0 0 auto; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 14px rgba(103,232,197,.55); }
@media (max-width:520px){ .app-shell{padding:18px 16px;} .logo{margin-bottom:28px;} .question{font-size:23px;} .card{border-radius:21px;} .chapter-card{gap:16px;} }
.section-label { margin:22px 4px 10px; color:#cfc9da; font-size:13px; font-weight:800; }
.relationship-label { color:#ffc0c9; }
.relationship-card { border-color:rgba(255,122,138,.12); background:linear-gradient(180deg,rgba(255,122,138,.035),rgba(255,255,255,.027)); }
.coral-track span { background:linear-gradient(90deg,var(--violet),var(--coral),#ffd0d6); }
.mind-label { color:#c7b8ff; }
.mind-card { border-color:rgba(139,92,246,.17); background:linear-gradient(180deg,rgba(139,92,246,.055),rgba(255,255,255,.025)); }
.mind-track span { background:linear-gradient(90deg,#7c5cff,var(--violet),var(--mint)); }

/* Final product surfaces */
.ghost { width:100%; margin-top:10px; border:1px solid var(--border); color:#dcd8e2; font-weight:800; padding:15px 18px; border-radius:16px; background:rgba(255,255,255,.035); }
.text-btn { width:100%; border:0; background:transparent; color:#8f8999; padding:16px; font-weight:700; }
.stage-row.done { border-color:rgba(103,232,197,.14); background:rgba(103,232,197,.035); }
.stage-row.done .stage-state { color:var(--mint); }
.final-loading { text-align:center; }
.orb { position:relative; width:120px; height:120px; margin:10px auto 30px; }
.orb span { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(185,161,255,.28); animation:orbit 1.5s ease-in-out infinite; }
.orb span:nth-child(2){ inset:15px; border-color:rgba(103,232,197,.32); animation-delay:-.45s; }
.orb span:nth-child(3){ inset:31px; background:radial-gradient(circle,rgba(185,161,255,.42),rgba(139,92,246,.06)); border:0; box-shadow:0 0 55px rgba(139,92,246,.24); animation-delay:-.8s; }
@keyframes orbit { 0%,100%{transform:scale(.94);opacity:.55}50%{transform:scale(1.06);opacity:1} }
.loading-lines { display:flex; justify-content:center; gap:7px; margin-top:28px; }
.loading-lines i { width:8px;height:8px;border-radius:50%;background:var(--lilac);animation:pulse .9s infinite alternate; }
.loading-lines i:nth-child(2){animation-delay:.15s}.loading-lines i:nth-child(3){animation-delay:.3s}
@keyframes pulse{to{opacity:.25;transform:translateY(-5px)}}
.final-screen { padding-bottom:36px; }
.final-hero { padding:6px 0 16px; }
.final-word { font-size:13px; color:var(--mint); font-weight:900; letter-spacing:.4px; margin-bottom:12px; }
.card-overline { color:#a9a4b2; font-weight:800; font-size:12px; margin-bottom:14px; }
.cinema-card { margin:14px 0; background:linear-gradient(160deg,rgba(139,92,246,.11),rgba(255,255,255,.03) 58%,rgba(103,232,197,.045)); }
.cinema-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; margin-bottom:16px; }
.cinema-head h3,.mini-result h3,.aura-card h3 { margin:0 0 4px; font-size:22px; }
.cinema-head span { color:var(--muted); font-size:13px; }
.cinema-head strong { direction:ltr; color:var(--mint); font-size:24px; }
.character-mark { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:rgba(139,92,246,.13);border:1px solid rgba(185,161,255,.19);font-size:22px; }
.cinema-card > p,.mini-result p,.aura-card p,.alt-card small { color:#c7c2ce; line-height:1.8; }
.why-list { display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; }
.why-list span { padding:7px 10px; border-radius:999px; font-size:11px; background:rgba(185,161,255,.08); color:#d2c7f8; border:1px solid rgba(185,161,255,.12); }
.micro-note { margin-top:14px; font-size:10px; line-height:1.65; color:#77717f; }
.duo-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.mini-result { min-height:176px; }
.mini-result.green { border-color:rgba(103,232,197,.14); background:linear-gradient(180deg,rgba(103,232,197,.055),rgba(255,255,255,.025)); }
.mini-result.red { border-color:rgba(255,122,138,.15); background:linear-gradient(180deg,rgba(255,122,138,.05),rgba(255,255,255,.025)); }
.aura-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; margin:10px 0 18px; }
.aura-card h3 { font-size:36px; color:var(--lilac); }
.aura-ring { --aura:270deg; width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mint) 0deg,var(--violet) var(--aura),rgba(255,255,255,.07) var(--aura)); position:relative; }
.aura-ring::after { content:""; position:absolute; inset:8px; border-radius:50%; background:#111019; }
.aura-ring span { z-index:1; font-weight:900; font-size:22px; }
.top-traits { display:grid; gap:4px; }
.top-trait { display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.top-trait:last-child{border:0}.top-trait>span{color:#6f6879;font-weight:900;font-size:12px}.top-trait div{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1}.top-trait small{color:var(--mint);font-weight:800;direction:ltr}
.result-stack { display:grid; gap:9px; }
.detail-card { padding:0; overflow:hidden; }
.detail-card summary { list-style:none; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:16px; cursor:pointer; }
.detail-card summary::-webkit-details-marker{display:none}.detail-card summary>span{font-size:18px}.detail-card summary small{display:block;color:#837d8b;font-size:10px;margin-bottom:3px}.detail-card summary b{font-size:14px}.detail-card summary i{color:#8f8999}.detail-card>p{padding:0 16px;color:#c6c1cc;line-height:1.85;font-size:14px}.detail-card .reflection{margin:12px 16px 16px;font-size:12px}
.alt-card { margin:18px 0; }
.alt-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.alt-row:last-child{border:0}.alt-row small{display:block;font-size:11px;margin-top:2px}.alt-row strong{color:#b9a1ff;direction:ltr}.small-mark{width:38px;height:38px;border-radius:12px;font-size:17px}
@media (max-width:520px){.duo-grid{grid-template-columns:1fr}.mini-result{min-height:0}.cinema-head{grid-template-columns:auto 1fr}.cinema-head>strong{grid-column:2}.aura-card{grid-template-columns:1fr auto}.final-screen h2{font-size:32px}}

/* v1.1 — clarity + story reveal + perspective */
.clarity-strip{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;margin:8px 0 18px;color:#85808e;font-size:10px;font-weight:800}.clarity-strip>div{height:4px;border-radius:999px;background:rgba(255,255,255,.055);overflow:hidden}.clarity-strip i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--mint));box-shadow:0 0 12px rgba(103,232,197,.25)}.clarity-strip b{direction:ltr;color:#b7b0c1;font-size:10px}
.story-screen{min-height:88vh;display:flex;flex-direction:column}.story-progress{display:flex;gap:5px;margin:2px 0 34px}.story-progress i{height:4px;flex:1;border-radius:999px;background:rgba(255,255,255,.07)}.story-progress i.active{background:linear-gradient(90deg,var(--violet),var(--mint))}.story-card{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:460px;padding:30px 5px;margin:auto 0;overflow:hidden}.story-card::before{content:"";position:absolute;width:310px;height:310px;border-radius:50%;filter:blur(80px);opacity:.22;top:20%;left:-140px;pointer-events:none}.story-card.violet::before{background:var(--violet)}.story-card.mint::before{background:var(--mint)}.story-card.coral::before{background:var(--coral)}.story-card h2{font-size:38px;line-height:1.35;max-width:610px;position:relative}.story-card .lead{font-size:18px;line-height:1.95;position:relative}.story-muted{color:#8e8798;font-size:14px}.perspective-card{margin:12px 0;background:linear-gradient(145deg,rgba(185,161,255,.065),rgba(255,255,255,.025))}.perspective-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.perspective-grid>div{padding:15px;border:1px solid rgba(255,255,255,.065);border-radius:17px;background:rgba(255,255,255,.025)}.perspective-grid small{color:#8f8999;font-size:10px}.perspective-grid h3,.contradiction-card h3{margin:6px 0 8px;font-size:19px}.perspective-grid p,.contradiction-card p{margin:0;color:#c7c2ce;line-height:1.8;font-size:13px}.contradiction-card{margin:10px 0;border-color:rgba(255,122,138,.13);background:linear-gradient(160deg,rgba(255,122,138,.055),rgba(139,92,246,.035))}.rank-pill{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.055);color:#9b95a5;font-size:10px;font-weight:900}.alt-row{grid-template-columns:auto auto 1fr auto}
@media(max-width:520px){.story-card{min-height:410px}.story-card h2{font-size:31px}.story-card .lead{font-size:16px}.perspective-grid{grid-template-columns:1fr}}

/* v1.2 — varied interactions + social share cards */
.question-mode{display:inline-flex;align-items:center;gap:7px;margin:0 0 9px;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.035);color:#948e9d;font-size:10px;font-weight:900}.question-mode.rank{color:var(--mint);border-color:rgba(103,232,197,.12);background:rgba(103,232,197,.04)}.question-mode.instinct{color:#ff9eaa;border-color:rgba(255,122,138,.12);background:rgba(255,122,138,.04)}.question-mode.visual{color:var(--lilac);border-color:rgba(185,161,255,.13);background:rgba(139,92,246,.045)}
.mode-visual{grid-template-columns:1fr 1fr}.mode-visual .answer{min-height:118px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px}.visual-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,rgba(139,92,246,.16),rgba(103,232,197,.07));border:1px solid rgba(185,161,255,.14);font-size:18px;color:#d8ccff}.mode-instinct .answer{border-right:3px solid rgba(255,122,138,.18)}.mode-instinct .answer:active{transform:scale(.985)}
.rank-slot{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;border:1px dashed rgba(103,232,197,.27);color:#7b7584;font-size:11px;font-weight:900}.answer.ranked{border-color:rgba(103,232,197,.29);background:rgba(103,232,197,.055);transform:translateX(-3px)}.answer.ranked .rank-slot{border-style:solid;background:var(--mint);color:#08120f}.answer.ranked:disabled{opacity:1}
.share-overlay{position:fixed;inset:0;z-index:100;background:rgba(3,3,7,.72);backdrop-filter:blur(12px);display:flex;align-items:flex-end;justify-content:center;padding:14px}.share-sheet{width:min(640px,100%);padding:11px 18px 20px;border:1px solid rgba(255,255,255,.1);border-radius:28px 28px 22px 22px;background:linear-gradient(180deg,#171421,#0d0c13);box-shadow:0 -20px 70px rgba(0,0,0,.45);animation:sheetUp .28s ease-out}.share-handle{width:42px;height:4px;border-radius:999px;background:rgba(255,255,255,.16);margin:2px auto 22px}.share-sheet h3{font-size:25px;margin:4px 0}.share-sheet>p{color:#918b99;margin:0 0 18px;font-size:13px}.share-options{display:grid;gap:8px}.share-options button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;text-align:right;gap:12px;width:100%;border:1px solid rgba(255,255,255,.07);border-radius:17px;padding:14px;background:rgba(255,255,255,.035);color:#f4f1f8}.share-options button>span{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(139,92,246,.11);color:#b9a1ff;font-size:10px;font-weight:900}.share-options b{display:block;font-size:14px}.share-options small{display:block;margin-top:3px;color:#817b89;font-size:10px}.share-options i{color:var(--mint);font-style:normal;font-size:19px}@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:520px){.mode-visual{grid-template-columns:1fr 1fr}.mode-visual .answer{min-height:126px;font-size:13px;padding:14px}.share-overlay{padding:0}.share-sheet{border-radius:28px 28px 0 0}}

/* v1.3 audit fixes */
.primary:disabled,.ghost:disabled,.answer:disabled{cursor:default}.primary:disabled{opacity:.62;transform:none;box-shadow:none}.primary:disabled:hover{transform:none}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* v1.3 audit fixes */
.primary:disabled,.ghost:disabled,.answer:disabled{cursor:default}.primary:disabled{opacity:.62;transform:none;box-shadow:none}.primary:disabled:hover{transform:none}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}