@import "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Syne:wght@600;700;800&family=Tajawal:wght@500;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,300;1,9..40,400&display=swap";body{margin:0}#root{min-height:100svh}.mc-capsule{background:linear-gradient(145deg,#1a0f3ae6,#2a156080);border:1px solid #c9a84c40;border-radius:16px;overflow:hidden}.mc-photo-wrap{position:relative}.mc-photo{object-fit:cover;width:100%;max-height:220px;display:block}.mc-photo--compact{border-radius:10px;flex-shrink:0;width:56px;height:56px;max-height:56px}.mc-photo-overlay{background:#00000080;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:23px;display:flex;position:absolute;bottom:10px;right:10px}.mc-photo-placeholder{background:#7c5ce71f;justify-content:center;align-items:center;height:100px;font-size:45px;display:flex}.mc-body{padding:14px 16px 16px}.mc-label{letter-spacing:.12em;color:#c9a84c;margin:0 0 6px;font-size:15px;font-weight:800}.mc-title{color:#fff;margin:0 0 4px;font-size:23px;font-weight:800}.mc-date{color:#ffffff73;margin:0 0 10px;font-size:17px}.mc-note{color:#ffffffd1;border:none;margin:0 0 10px;padding:0;font-size:19px;font-style:italic;line-height:1.5}.mc-mood{color:#ffffff80;margin:0;font-size:17px}.mc-capsule--compact{align-items:flex-start;gap:12px;padding:12px;display:flex}.mc-capsule--compact .mc-body{flex:1;min-width:0;padding:0}.mc-capsule--compact .mc-title{font-size:19px}.mc-capsule--compact .mc-note{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:4px 0 0;font-size:17px;display:-webkit-box;overflow:hidden}.mc-grid{flex-direction:column;gap:14px;display:flex}.journey-screen{width:100%;max-width:none;margin:0;padding-bottom:32px}.journey-panel--card{background:#ffffff09;border:1px solid #ffffff14;border-radius:20px;padding:clamp(16px,2.5vw,24px);box-shadow:0 8px 32px #0003}.journey-timeline-wide__entries{flex-direction:column;gap:10px;display:flex}.journey-wrapped-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px;display:grid}.journey-passport-layout{flex-direction:column;gap:20px;display:flex}.journey-passport-layout__hero{text-align:center;flex-direction:column;align-items:center;display:flex}.journey-tabs{background:#00000040;border:1px solid #ffffff0f;border-radius:14px;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:24px;padding:4px;display:grid}.journey-tab{cursor:pointer;white-space:nowrap;text-align:center;color:#ffffff80;background:0 0;border:none;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:0;padding:10px 6px;font-size:16px;font-weight:700;line-height:1.2;transition:background .2s;display:flex}.journey-tab__icon{font-size:21px;line-height:1}.journey-tab--active{color:#fff;background:linear-gradient(135deg,#7c5ce7,#a855f7);transform:scale(1.02);box-shadow:0 4px 16px #7c5ce773}.journey-tab:hover:not(.journey-tab--active){color:#ffffffbf;background:#ffffff0f}.journey-tab{transition:background .2s,transform .2s,box-shadow .2s}.journey-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px;display:flex}.journey-refresh{color:#ffffffb3;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:10px;flex-shrink:0;padding:8px 12px;font-size:17px;font-weight:600;transition:background .2s,transform .15s}.journey-refresh:hover{color:#fff;background:#7c5ce733}.journey-refresh:active{transform:scale(.96)}.journey-panel{animation:.4s cubic-bezier(.34,1.2,.64,1) both journeyPanelIn}.journey-insight{background:linear-gradient(135deg,#7c5ce733,#a855f714);border:1px solid #a855f740;border-radius:16px;margin-bottom:20px;padding:16px 18px;animation:4s ease-in-out infinite journeyInsightPulse}.journey-insight p{color:#ffffffd9;margin:0;font-size:19px;line-height:1.5}.journey-skeleton{flex-direction:column;gap:12px;padding:8px 0;display:flex}.journey-skeleton__bar{background:linear-gradient(90deg,#ffffff0a 0%,#ffffff1a 50%,#ffffff0a 100%) 0 0/200% 100%;border-radius:12px;height:48px;animation:1.4s ease-in-out infinite journeyShimmer}.journey-chart__col--clickable{cursor:pointer;border-radius:10px;transition:background .2s,transform .2s}.journey-chart__col--clickable:hover{background:#7c5ce71f}.journey-chart__col--selected{background:#7c5ce733;outline:1px solid #a855f780}.journey-chart__bar--grow{transform-origin:bottom;animation:.65s cubic-bezier(.34,1.3,.64,1) both journeyBarGrow}.journey-stat--pop{animation:.5s cubic-bezier(.34,1.2,.64,1) both journeyStatPop}.journey-entry{background:#ffffff0a;border:1px solid #ffffff0f;border-radius:12px;align-items:flex-start;gap:12px;padding:12px 14px;transition:transform .2s,border-color .2s,background .2s;animation:.4s both journeyEntryIn;display:flex}.journey-entry:hover{background:#7c5ce714;border-color:#a855f740;transform:translate(4px)}.journey-entry--highlight{background:#7c5ce724;border-color:#a855f773;box-shadow:0 0 20px #7c5ce733}.journey-passport-hero{text-align:center;background:linear-gradient(145deg,#1a0f3a,#2a1560);border:1.5px solid #c9a84c59;border-radius:20px;margin-bottom:20px;padding:20px 16px;animation:3s ease-in-out infinite journeyPassportGlow}.journey-passport-ring{color:#fff;background:#00000040;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin:12px auto 0;font-size:25px;font-weight:800;display:flex;position:relative}.journey-passport-ring:before{content:"";background:conic-gradient(#a855f7 calc(var(--pct,0) * 1%), #ffffff14 0);z-index:-1;border-radius:50%;animation:8s linear infinite journeyRingSpin;position:absolute;inset:-3px}.journey-stamp{text-align:center;cursor:pointer;border-radius:14px;padding:14px 12px;transition:transform .25s cubic-bezier(.34,1.3,.64,1),box-shadow .25s;animation:.5s cubic-bezier(.34,1.2,.64,1) both journeyStampIn}.journey-stamp:hover{transform:translateY(-4px)scale(1.03)}.journey-stamp--selected{transform:scale(1.05);box-shadow:0 8px 28px #7c5ce759}.journey-stamp--locked{cursor:default;opacity:.55}.journey-stamp--locked:hover{transform:none}.journey-stamp__emoji{font-size:37px;transition:transform .3s;display:inline-block}.journey-stamp--stamped .journey-stamp__emoji{animation:.6s cubic-bezier(.34,1.4,.64,1) both journeyStampPop}.journey-stamp-detail{background:#a855f71a;border:1px solid #a855f74d;border-radius:14px;margin-top:16px;padding:14px 16px;animation:.35s both journeyPanelIn}.journey-wrapped-hero{text-align:center;background:linear-gradient(135deg,#7c3aed,#db2777,#f59e0b) 0 0/200% 200%;border-radius:24px;margin-bottom:20px;padding:28px 20px;animation:6s infinite journeyWrappedShift;position:relative;overflow:hidden}.journey-wrapped-card{background:#ffffff0d;border:1px solid #ffffff14;border-radius:14px;padding:14px 12px;transition:transform .2s,border-color .2s;animation:.45s cubic-bezier(.34,1.2,.64,1) both journeyCardIn}.journey-wrapped-card:hover{border-color:#a855f759;transform:scale(1.03)}.journey-share-btn{cursor:pointer;color:#fff;background:linear-gradient(90deg,#a855f7,#ec4899);border:none;border-radius:99px;width:100%;margin-top:16px;padding:14px 20px;font-size:20px;font-weight:700;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 24px #a855f759}.journey-share-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px #a855f780}.journey-memories-intro{animation:.4s both journeyPanelIn}.journey-memories-search{box-sizing:border-box;color:#e0d8ff;background:#ffffff0f;border:1.5px solid #b09ee026;border-radius:12px;outline:none;width:100%;padding:11px 14px;font-family:inherit;font-size:18px;transition:border-color .18s}.journey-memories-search:focus{border-color:#7c5ce780}.mc-capsule{transition:transform .25s,box-shadow .25s}.mc-capsule:hover{transform:translateY(-3px);box-shadow:0 12px 32px #00000059}@keyframes journeyPanelIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes journeyBarGrow{0%{opacity:0;transform:scaleY(0)}to{opacity:.9;transform:scaleY(1)}}@keyframes journeyStatPop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes journeyEntryIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes journeyStampIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes journeyStampPop{0%{transform:scale(.5)}70%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes journeyCardIn{0%{opacity:0;transform:translateY(10px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes journeyInsightPulse{0%,to{box-shadow:0 0 #a855f700}50%{box-shadow:0 0 24px #a855f726}}@keyframes journeyPassportGlow{0%,to{border-color:#c9a84c59}50%{border-color:#c9a84ca6}}@keyframes journeyWrappedShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes journeyShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes journeyRingSpin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.journey-panel,.journey-chart__bar--grow,.journey-stat--pop,.journey-entry,.journey-stamp,.journey-wrapped-card,.journey-insight,.journey-passport-hero,.journey-wrapped-hero,.journey-passport-ring:before{animation:none!important}.journey-tab--active{transform:none}}.journey-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px;display:grid}.journey-stat{background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;min-width:0;padding:10px 12px}.journey-stat__label{color:#ffffff73;margin:0;font-size:15px;line-height:1.3}.journey-stat__value{color:#fff;white-space:nowrap;text-overflow:ellipsis;text-transform:capitalize;margin:4px 0 0;font-size:20px;font-weight:700;overflow:hidden}.journey-chart-empty{color:#ffffff73;text-align:center;margin:0;padding:24px 0;font-size:18px}.journey-chart{box-sizing:border-box;background:#ffffff08;border:1px solid #ffffff0f;border-radius:14px;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:6px;height:132px;padding:12px 10px 10px;display:grid}.journey-chart__col{flex-direction:column;justify-content:flex-end;align-items:center;min-width:0;height:100%;display:flex}.journey-chart__plot{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:3px;width:100%;min-height:0;display:flex}.journey-chart__emoji{opacity:.85;flex-shrink:0;font-size:16px;line-height:1}.journey-chart__bar{opacity:.9;background:linear-gradient(#c084fc,#7c5ce7);border-radius:6px 6px 3px 3px;flex-shrink:0;width:100%;max-width:26px;min-height:8px}.journey-chart__bar--empty{opacity:.25;background:#fff3;border-radius:2px;max-width:18px;min-height:4px;height:4px!important}.journey-chart__col--empty .journey-chart__label,.journey-chart__col--empty .journey-chart__date{opacity:.45}.journey-chart__label{color:#ffffff8c;margin-top:6px;font-size:15px;font-weight:700;line-height:1}.journey-chart__date{color:#ffffff59;margin-top:2px;font-size:14px;line-height:1}.journey-entry__title{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:18px;font-weight:600;overflow:hidden}.journey-entry__meta{color:#ffffff73;white-space:nowrap;text-overflow:ellipsis;margin:4px 0 0;font-size:16px;overflow:hidden}.journey-entry__dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:6px;animation:2s ease-in-out infinite journeyInsightPulse}.journey-tab__badge{color:#fff;background:#ec4899e6;border-radius:99px;margin-top:2px;padding:1px 5px;font-size:14px}.journey-filter-hint{color:#c084fc;text-align:center;margin:10px 0 0;font-size:17px}.journey-clear-filter{color:#a855f7;cursor:pointer;font-size:inherit;background:0 0;border:none;padding:0;text-decoration:underline}.journey-chart__col--clickable{font:inherit;color:inherit;background:0 0;border:none}@media (width>=720px){.journey-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.mc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}}@media (width>=960px){.journey-timeline-wide{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;gap:28px;display:grid}.journey-timeline-wide__entries{grid-template-columns:1fr;gap:10px;max-height:520px;padding-right:4px;display:grid;overflow-y:auto}.journey-wrapped-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.journey-passport-layout{grid-template-columns:minmax(220px,280px) minmax(0,1fr);align-items:start;gap:28px;display:grid}.journey-passport-layout__hero{position:sticky;top:80px}.mc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=1200px){.journey-timeline-wide__entries{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}.mc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=420px){.journey-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.journey-stats{grid-template-columns:1fr}}.rewards-screen{width:100%;max-width:none;margin:0;padding-bottom:48px;animation:.35s fadeUp}.rewards-hero{text-align:center;margin-bottom:24px}.rewards-actions{flex-direction:column;gap:16px;margin-bottom:24px;display:flex}.rewards-progress-body{flex-direction:column;gap:20px;display:flex}.rewards-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.rewards-stat-card{background:#ffffff0a;border:1px solid #ffffff12;border-radius:14px;min-width:0;padding:14px 16px}.rewards-stat-label{color:#6b5f8a;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;text-overflow:ellipsis;margin:0 0 6px;font-size:14px;font-weight:700;overflow:hidden}.rewards-stat-value{text-overflow:ellipsis;margin:0;font-family:Syne,sans-serif;font-size:clamp(1.5rem,3vw,2.0625rem);font-weight:800;line-height:1.1;overflow:hidden}.rewards-badges-grid{flex-direction:column;gap:8px;display:flex}.rewards-section-card{background:#ffffff09;border:1px solid #ffffff14;border-radius:18px;padding:18px 20px}@media (width>=720px){.rewards-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.rewards-stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.rewards-badges-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}}@media (width>=960px){.rewards-hero-row{grid-template-columns:minmax(0,1fr) minmax(280px,360px);align-items:start;gap:28px;margin-bottom:28px;display:grid}.rewards-hero{text-align:left;margin-bottom:0}.rewards-hero .rewards-rank-orb{margin-left:0;margin-right:0}.rewards-sidebar-stack{flex-direction:column;gap:16px;display:flex}.rewards-progress-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:24px;display:grid}.rewards-progress-stats{grid-column:1/-1}.rewards-badges-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=1200px){.rewards-badges-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.share-actions{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin-top:12px;display:flex}.share-actions--compact{justify-content:flex-start;margin-top:10px}.share-actions__btn{color:#e0d8ff;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:14px;flex:1;min-width:120px;max-width:200px;padding:12px 16px;font-family:DM Sans,sans-serif;font-size:19px;font-weight:700;transition:background .2s,border-color .2s,transform .15s}.share-actions__btn:hover:not(:disabled){background:#ffffff1a;border-color:#a855f766;transform:translateY(-1px)}.share-actions__btn:disabled{opacity:.45;cursor:not-allowed}.share-actions__btn--primary{color:#fff;background:linear-gradient(135deg,#7c5ce780,#a855f759);border-color:#a855f773}.share-page{color:#e8e0ff;background:#0a0618;min-height:100vh;position:relative;overflow-x:hidden}.share-page__stars{pointer-events:none;background:radial-gradient(at 50% 0,#581c8740 0%,#0000 55%),radial-gradient(circle at 20% 80%,#3b82f614 0%,#0000 40%);position:fixed;inset:0}.share-page__header{z-index:1;text-align:center;padding:20px 24px 8px;position:relative}.share-page__brand{color:#fff;letter-spacing:-.02em;font-family:Syne,sans-serif;font-size:33px;font-weight:800;text-decoration:none}.share-page__tag{color:#ffffff73;letter-spacing:.08em;text-transform:uppercase;margin:6px 0 0;font-size:17px}.share-page__main{z-index:1;max-width:480px;margin:0 auto;padding:16px 20px 48px;position:relative}.share-page__main--wide{width:100%;max-width:min(900px,100%);padding:16px clamp(20px,4vw,40px) 48px}.share-page--wrapped .share-page__main--wide{max-width:min(1440px,100%)}.share-page--wrapped .share-page__cta{text-align:center;max-width:280px;margin:24px auto 0;display:block}.share-page--wrapped .wrapped-display{width:100%}.share-page__status,.share-page__empty{text-align:center;color:#fff9;font-size:20px}.share-page__cta{color:#fff;background:linear-gradient(90deg,#7c5ce7,#a855f7);border-radius:99px;margin-top:20px;padding:12px 22px;font-size:19px;font-weight:700;text-decoration:none;display:inline-block}.share-song-card{text-align:center;background:#ffffff0a;border:1px solid #ffffff14;border-radius:24px;padding:20px}.share-song-card__hero{max-width:220px;margin:0 auto 16px}.share-song-card__cover,.share-song-card__cover-ph{aspect-ratio:1;object-fit:cover;border-radius:20px;width:100%;box-shadow:0 16px 48px #00000073}.share-song-card__cover-ph{background:linear-gradient(145deg,#7c5ce759,#a855f726);justify-content:center;align-items:center;font-size:69px;display:flex}.share-song-card__title{color:#fff;margin:0 0 8px;font-family:Syne,sans-serif;font-size:27px;font-weight:800}.share-song-card__meta{color:#ffffff8c;margin:0 0 20px;font-size:19px}.share-song-card__play{background:linear-gradient(135deg, var(--rc,#7c5ce7), #a855f7);color:#fff;cursor:pointer;border:none;border-radius:99px;align-items:center;gap:8px;margin-bottom:10px;padding:14px 28px;font-size:21px;font-weight:800;display:inline-flex}.share-song-card__open{color:#a78bfa;margin-bottom:16px;font-size:18px;display:block}.share-song-card__memory{text-align:left;margin:20px 0}.share-song-card__lyrics{text-align:left;color:#ffffffbf;white-space:pre-wrap;background:#00000040;border-radius:12px;max-height:200px;margin:16px 0;padding:14px;font-size:17px;line-height:1.5;overflow-y:auto}.mc-capsule .share-actions--compact .share-actions__btn{flex:1;min-width:100px;max-width:none}:root{--bg:#07050f;--bg2:#0d0a1e;--bg3:#120e28;--surface:#ffffff0b;--surface2:#ffffff12;--border:#ffffff14;--border2:#ffffff24;--purple:#7c5ce7;--purple-l:#a78bfa;--purple-d:#5b3fcf;--pink:#f472b6;--cyan:#22d3ee;--gold:#fbbf24;--green:#34d399;--text:#f0ecff;--text2:#b09ee0;--text3:#7a6fa8;--text4:#4a4270;--radius-sm:10px;--radius-md:16px;--radius-lg:22px;--radius-xl:28px;--shadow-glow:0 0 40px #7c5ce72e;--shadow-card:0 8px 32px #0006;--transition:all .22s cubic-bezier(.4,0,.2,1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100dvh;font-family:DM Sans,Segoe UI,sans-serif;font-size:25px;line-height:1.6;overflow-x:hidden}.ekko-root{flex-direction:column;min-height:100dvh;display:flex;position:relative}.stars-bg{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.stars-bg:before,.stars-bg:after{content:"";filter:blur(80px);opacity:.18;border-radius:50%;animation:12s ease-in-out infinite auroraFloat;position:absolute}.stars-bg:before{background:radial-gradient(circle,#7c5ce7,#a855f7);width:600px;height:600px;animation-duration:15s;top:-200px;left:-150px}.stars-bg:after{background:radial-gradient(circle,#22d3ee,#7c5ce7);width:500px;height:500px;animation-duration:18s;animation-delay:-6s;bottom:-150px;right:-100px}@keyframes auroraFloat{0%,to{transform:translate(0)scale(1)}33%{transform:translate(30px,-20px)scale(1.05)}66%{transform:translate(-20px,30px)scale(.95)}}.star{opacity:0;animation:starTwinkle var(--dur,3s) ease-in-out var(--delay,0s) infinite;background:#fff;border-radius:50%;position:absolute}@keyframes starTwinkle{0%,to{opacity:0;transform:scale(.8)}50%{opacity:.55;transform:scale(1.2)}}.ekko-header{z-index:100;padding:14px 24px;padding-top:max(14px, env(safe-area-inset-top));padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right));-webkit-backdrop-filter:blur(24px)saturate(1.4);border-bottom:1px solid var(--border);background:#07050fbf;justify-content:flex-start;align-items:center;gap:12px;display:flex;position:sticky;top:0}.menu-btn{cursor:pointer;margin:-10px;-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:5px;margin-inline-end:0;padding:10px;display:flex}.ekko-header-brand{cursor:pointer;flex:1;align-items:center;gap:8px;min-width:0;display:flex;overflow:hidden}.ekko-logo-word,.orb-brand,.auth-logo{unicode-bidi:isolate;font-family:Archivo Black,Syne,sans-serif}.ekko-logo-word{background:linear-gradient(135deg,#a78bfa,#f472b6);-webkit-text-fill-color:transparent;letter-spacing:.01em;white-space:nowrap;-webkit-background-clip:text;background-clip:text;flex-shrink:0;font-family:Archivo Black,sans-serif;font-size:27px;font-style:normal;font-weight:400;line-height:1}.menu-btn span{background:#a78bfa;border-radius:2px;width:22px;height:2px;display:block}.ekko-region-tag{background:var(--surface2);border:1px solid var(--border2);color:var(--text2);-webkit-text-fill-color:var(--text2);white-space:nowrap;text-overflow:ellipsis;border-radius:20px;flex-shrink:1;max-width:min(220px,42vw);padding:3px 10px;font-family:DM Sans,sans-serif;font-size:17px;font-weight:500;overflow:hidden}.ekko-lang-tag{color:var(--purple-l);-webkit-text-fill-color:var(--purple-l)}.nav-history-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text3);cursor:pointer;transition:var(--transition);white-space:nowrap;padding:7px 13px;font-family:DM Sans,sans-serif;font-size:17px;font-weight:600}.nav-history-btn:hover{background:var(--surface2);border-color:var(--border2);color:var(--text);transform:translateY(-1px)}.xp-chip{color:var(--purple-l);letter-spacing:.02em;white-space:nowrap;background:linear-gradient(135deg,#7c5ce740,#a855f726);border:1px solid #7c5ce766;border-radius:20px;padding:5px 12px;font-family:Syne,sans-serif;font-size:17px;font-weight:700}.ekko-main{z-index:1;padding:24px 20px 48px;padding-bottom:max(48px, env(safe-area-inset-bottom));flex:1;width:100%;max-width:520px;margin:0 auto;position:relative}.ekko-main.ekko-main--wide{max-width:min(1440px,100%);padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)}.ekko-main.ekko-main--onboarding{justify-content:center;align-items:center;max-width:none;min-height:calc(100dvh - 60px);padding:32px 24px 48px;display:flex;overflow:visible}.onboarding-shell{grid-template-columns:1fr auto 1fr;align-items:center;width:100%;display:grid;overflow:visible}.onboarding-shell__logo{text-align:center;flex-direction:column;grid-column:1;justify-self:end;align-items:center;padding-right:clamp(28px,4vw,48px);display:flex;overflow:visible;transform:translate(clamp(12px,2vw,36px))translateY(-28px)}.onboarding-shell__hook{width:max-content;max-width:none;margin-top:16px;overflow:visible}@keyframes orbBrandShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.ekko-tagline,.onboarding-tagline,.auth-tagline{letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;background:linear-gradient(130deg,#e0c3fc 0%,#a78bfa 35%,#60a5fa 70%,#67e8f9 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px #a78bfa99);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;margin:0 0 10px;font-family:Syne,sans-serif;font-size:clamp(21px,2.4vw,25px);font-weight:800;line-height:1.35;animation:6s ease-in-out infinite orbBrandShift}.auth-tagline{margin:0 0 .65rem;font-size:clamp(19px,2.2vw,22px)}.onboarding-hook{letter-spacing:.02em;color:var(--text2);white-space:nowrap;margin:0;font-family:DM Sans,Segoe UI,sans-serif;font-size:18px;font-weight:500;line-height:1.5}body.ekko-rtl .ekko-header{gap:10px}body.ekko-rtl .ekko-header-brand{justify-content:flex-start}body.ekko-rtl .ekko-logo-word{font-size:25px}body.ekko-rtl .ekko-region-tag{max-width:min(180px,36vw)}body.ekko-rtl .ekko-tagline,body.ekko-rtl .onboarding-tagline,body.ekko-rtl .auth-tagline{letter-spacing:0;text-transform:none;white-space:nowrap;background:0 0;-webkit-background-clip:unset;background-clip:unset;-webkit-text-fill-color:#ddd6fe;color:#ddd6fe;filter:drop-shadow(0 0 16px #a78bfa80);padding:.15em 0 .35em;font-family:Tajawal,Noto Sans Arabic,Segoe UI,sans-serif;font-size:clamp(25px,3.2vw,31px);font-weight:800;line-height:1.75;animation:none}body.ekko-rtl .onboarding-hook,body.ekko-rtl .auth-hook{white-space:normal;max-width:28ch;font-family:Tajawal,Noto Sans Arabic,DM Sans,sans-serif;line-height:1.65}body.ekko-rtl .onboarding-shell__hook{width:auto;max-width:min(340px,100vw - 48px)}body.ekko-rtl .onboarding-shell__logo{justify-self:end;padding-inline:0 clamp(28px,4vw,48px);transform:translate(clamp(8px,1.2vw,16px))translateY(-28px)}.onboarding-shell__picker{grid-column:2;width:min(340px,100vw - 48px)}@media (width<=860px){.onboarding-shell{grid-template-columns:1fr;justify-items:center;gap:28px}.onboarding-shell__logo{padding-right:0;grid-column:1;justify-self:center;padding-inline:0;transform:none}body.ekko-rtl .onboarding-shell__logo{transform:none}.onboarding-shell__hook{width:max-content;max-width:calc(100vw - 48px)}.onboarding-shell__picker{grid-column:1;width:min(340px,100vw - 48px)}}@media (width<=900px){.ekko-main.ekko-main--wide{padding-left:20px;padding-right:20px}}.back-btn-wrap{margin-bottom:20px}.back-button{background:var(--surface);border:1px solid var(--border);color:var(--text3);cursor:pointer;transition:var(--transition);border-radius:50px;align-items:center;gap:8px;padding:8px 16px;font-family:DM Sans,sans-serif;font-size:18px;font-weight:600;display:inline-flex}.back-button:hover{background:var(--surface2);border-color:var(--border2);color:var(--text);transform:translate(-2px)}.back-arrow{font-size:19px;transition:transform .2s}.back-button:hover .back-arrow{transform:translate(-3px)}.generating-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:20px;min-height:60vh;display:flex}.gen-orb{background:radial-gradient(circle at 38% 32%,#a78bfa,#7c5ce7 50%,#5b3fcf);border-radius:50%;width:96px;height:96px;animation:2.2s ease-in-out infinite genOrbPulse;box-shadow:0 0 0 16px #7c5ce714,0 0 0 32px #7c5ce70a,0 0 60px #7c5ce780}@keyframes genOrbPulse{0%,to{transform:scale(1);box-shadow:0 0 0 16px #7c5ce714,0 0 0 32px #7c5ce70a,0 0 60px #7c5ce780}50%{transform:scale(1.04);box-shadow:0 0 0 22px #7c5ce71f,0 0 0 44px #7c5ce70f,0 0 90px #a855f7b3}}.gen-label{color:var(--text);letter-spacing:-.01em;font-family:Syne,sans-serif;font-size:25px;font-weight:700}.gen-sub{color:var(--text3);font-size:18px}.gen-countdown{color:var(--accent,#a78bfa);font-variant-numeric:tabular-nums;margin:0;font-size:20px;font-weight:600}.gen-progress-track{background:#7c5ce733;border-radius:3px;width:min(280px,88vw);height:6px;overflow:hidden}.gen-progress-fill{background:linear-gradient(90deg, var(--accent,#7c5ce7), #c084fc);border-radius:3px;height:100%;transition:width .8s ease-out}.player-screen{width:100%;animation:.35s fadeUp}.glass-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-lg);transition:var(--transition);background:#ffffff0a;padding:24px}.glass-card:hover{border-color:var(--border2);box-shadow:var(--shadow-card)}.ekko-input{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text);transition:var(--transition);resize:none;outline:none;padding:13px 16px;font-family:DM Sans,sans-serif;font-size:20px}.ekko-input::placeholder{color:var(--text4)}.ekko-input:focus{background:var(--surface2);border-color:#7c5ce799;box-shadow:0 0 0 3px #7c5ce71f}.ekko-btn{border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);letter-spacing:.01em;border:none;justify-content:center;align-items:center;gap:8px;padding:13px 28px;font-family:Syne,sans-serif;font-size:20px;font-weight:700;display:inline-flex}.ekko-btn-primary{background:linear-gradient(135deg,var(--purple),#a855f7);color:#fff;box-shadow:0 4px 20px #7c5ce766}.ekko-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px #7c5ce78c}.ekko-btn-primary:active{transform:translateY(0)}.ekko-btn-ghost{background:var(--surface);color:var(--text2);border:1.5px solid var(--border)}.ekko-btn-ghost:hover{background:var(--surface2);border-color:var(--border2);color:var(--text)}.section-label{color:var(--text4);text-transform:uppercase;letter-spacing:.09em;margin-bottom:12px;font-family:Syne,sans-serif;font-size:16px;font-weight:700}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#7c5ce74d;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#7c5ce780}.auth-screen{text-align:center;flex-direction:column;align-items:center;width:100%;max-width:380px;margin:0 auto;animation:.4s fadeUp;display:flex}.auth-logo{letter-spacing:.3em;color:var(--text3);text-transform:uppercase;margin-bottom:.5rem;font-family:Syne,sans-serif;font-size:18px;font-weight:700}.auth-headline{color:var(--text);letter-spacing:.02em;background:linear-gradient(135deg,#f0ecff,#a78bfa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-family:Playfair Display,serif;font-size:35px;font-style:italic;font-weight:500}.auth-hook{color:var(--text2);max-width:340px;margin:0 0 1.75rem;font-size:19px;line-height:1.55}.auth-sub{color:var(--text3);margin-bottom:2rem;font-size:19px}.auth-card{border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-width:420px;box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0a;flex-direction:column;gap:12px;padding:2rem;display:flex}.auth-google{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-md);width:100%;color:var(--text);cursor:pointer;transition:var(--transition);justify-content:center;align-items:center;gap:10px;padding:12px;font-family:DM Sans,sans-serif;font-size:19px;font-weight:600;display:flex}.auth-google:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-1px)}.auth-divider{color:var(--text4);align-items:center;gap:10px;font-size:17px;display:flex}.auth-divider:before,.auth-divider:after{content:"";background:var(--border);flex:1;height:1px}.auth-input{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text);transition:var(--transition);outline:none;padding:12px 16px;font-family:DM Sans,sans-serif;font-size:19px}.auth-input::placeholder{color:var(--text4)}.auth-input:focus{background:var(--surface2);border-color:#7c5ce799;box-shadow:0 0 0 3px #7c5ce71f}.auth-error{color:#f87171;border-radius:var(--radius-sm);text-align:left;background:#f8717114;border:1px solid #f8717133;padding:8px 12px;font-size:17px}.auth-cta{background:linear-gradient(135deg,var(--purple),#a855f7);border-radius:var(--radius-md);color:#fff;cursor:pointer;width:100%;transition:var(--transition);letter-spacing:.01em;border:none;padding:13px;font-family:Syne,sans-serif;font-size:20px;font-weight:700;box-shadow:0 4px 20px #7c5ce766}.auth-cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 28px #7c5ce78c}.auth-cta:disabled{opacity:.4;cursor:default;transform:none}.auth-toggle{color:var(--text3);margin-top:.25rem;font-size:18px}.auth-toggle span{color:var(--purple-l);cursor:pointer;font-weight:600;transition:color .2s}.auth-toggle span:hover{color:var(--text)}.onboarding{width:100%;max-width:480px;margin:0 auto;animation:.4s fadeUp}.ob-header{text-align:center;margin-bottom:2rem}.ob-logo{letter-spacing:.3em;color:var(--text3);text-transform:uppercase;margin-bottom:.75rem;font-family:Syne,sans-serif;font-size:18px;font-weight:700}.ob-headline em,.cc-headline em,.rh-headline em{font-family:Playfair Display,serif;font-style:italic}.ob-headline em{background:linear-gradient(135deg,#a78bfa,#f472b6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:italic}.ob-sub{color:var(--text3);font-size:19px;line-height:1.6}.ob-regions{flex-direction:column;gap:8px;margin-bottom:1.25rem;display:flex}.ob-region{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);text-align:left;align-items:center;gap:14px;width:100%;padding:14px 18px;font-family:DM Sans,sans-serif;display:flex;position:relative;overflow:hidden}.ob-region:before{content:"";background:var(--region-color,var(--purple));opacity:0;width:3px;transition:opacity .2s;position:absolute;top:0;bottom:0;left:0}.ob-region:hover{background:var(--surface2);border-color:var(--border2);box-shadow:var(--shadow-card);transform:translate(4px)}.ob-region:hover:before{opacity:1}.ob-emoji{flex-shrink:0;font-size:31px}.ob-info{flex-direction:column;flex:1;gap:2px;display:flex}.ob-region-label{color:var(--text);font-size:20px;font-weight:600}.ob-region-desc{color:var(--text3);font-size:17px}.ob-arrow{color:var(--text4);transition:var(--transition);font-size:21px}.ob-region:hover .ob-arrow{color:var(--text2);transform:translate(3px)}.ob-skip{text-align:center;color:var(--text4);cursor:pointer;font-size:18px;transition:color .2s}.ob-skip:hover{color:var(--text2)}.mi-root{border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-width:440px;box-shadow:var(--shadow-card);background:#ffffff08;margin:0 auto;font-family:DM Sans,sans-serif;animation:.35s fadeUp;overflow:hidden}.mi-tabs{border-bottom:1px solid var(--border);background:#ffffff08;gap:4px;padding:6px;display:flex}.mi-tab{border-radius:var(--radius-sm);color:var(--text3);cursor:pointer;transition:var(--transition);background:0 0;border:none;flex:1;padding:9px 4px;font-family:DM Sans,sans-serif;font-size:18px;font-weight:600}.mi-tab.active{color:var(--purple-l);background:#7c5ce733;box-shadow:0 2px 8px #7c5ce726}.mi-panel{flex-direction:column;align-items:center;gap:20px;min-height:320px;padding:24px 20px;display:flex}.voice-wrap{flex-direction:column;align-items:center;gap:14px;width:100%;display:flex}.mic-ring{border:2px solid var(--border2);background:var(--surface);cursor:pointer;width:88px;height:88px;transition:var(--transition);border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:0 4px 20px #7c5ce726}.mic-ring:hover:not(:disabled){border-color:var(--purple);transform:scale(1.04);box-shadow:0 6px 28px #7c5ce759}.mic-ring.rec{border-color:#f87171;animation:1.4s ease-in-out infinite recPulse;box-shadow:0 0 0 6px #f871711f}.mic-ring.spin .mic-ico{animation:1.2s linear infinite spin}.mic-ring:disabled{cursor:default;opacity:.7}.mic-ico{font-size:37px;line-height:1;display:block}.mic-pulse{pointer-events:none;border:2px solid #f8717159;border-radius:50%;animation:1.4s ease-out infinite pulsRing;position:absolute;inset:-10px}@keyframes recPulse{0%,to{box-shadow:0 0 0 6px #f871711f}50%{box-shadow:0 0 0 14px #f8717133}}@keyframes pulsRing{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}.voice-lbl{color:var(--text3);text-align:center;margin:0;font-size:18px;font-weight:500}.lang-badge{color:var(--purple-l);background:#7c5ce71f;border:1px solid #7c5ce740;border-radius:20px;padding:4px 14px;font-size:17px;font-weight:700}.voice-transcript{color:var(--text3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;max-width:300px;padding:8px 14px;font-size:17px;font-style:italic;line-height:1.6}.voice-error{color:#f87171;text-align:center;max-width:280px;font-size:17px;line-height:1.5}.waveform{align-items:center;gap:3px;height:36px;display:flex}.wbar{width:3px;height:var(--h,10px);background:linear-gradient(180deg,var(--purple-l),var(--purple));border-radius:2px;animation:.8s ease-in-out infinite alternate wave;display:block}@keyframes wave{0%{opacity:.6;transform:scaleY(.4)}to{opacity:1;transform:scaleY(1.4)}}.analysing-dots{align-items:center;gap:6px;display:flex}.dot{background:var(--purple);border-radius:50%;width:8px;height:8px;animation:.8s ease-in-out infinite alternate dotBounce}@keyframes dotBounce{0%{opacity:.5;transform:translateY(0)}to{opacity:1;transform:translateY(-6px)}}.text-wrap{flex-direction:column;gap:12px;width:100%;display:flex}.text-prompt{color:var(--text3);margin:0;font-size:19px;font-weight:500}.text-area{box-sizing:border-box;border:1.5px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text);background:var(--surface);resize:none;transition:var(--transition);outline:none;padding:12px 14px;font-family:DM Sans,sans-serif;font-size:19px;line-height:1.6}.text-area:focus{background:var(--surface2);border-color:#7c5ce799;box-shadow:0 0 0 3px #7c5ce71a}.analyse-btn{border-radius:var(--radius-md);background:linear-gradient(135deg,var(--purple),#a855f7);color:#fff;cursor:pointer;transition:var(--transition);border:none;align-self:flex-end;padding:10px 22px;font-family:Syne,sans-serif;font-size:19px;font-weight:700;box-shadow:0 4px 16px #7c5ce759}.analyse-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 22px #7c5ce780}.analyse-btn:disabled{opacity:.45;cursor:default;transform:none}.quiz-wrap{flex-direction:column;align-items:center;gap:18px;width:100%;display:flex}.quiz-progress{gap:6px;display:flex}.quiz-pip{background:var(--surface2);border-radius:3px;width:28px;height:5px;transition:background .25s}.quiz-pip.active{background:var(--purple)}.quiz-pip.done{background:var(--text3)}.quiz-q{color:var(--text);text-align:center;font-family:Syne,sans-serif;font-size:21px;font-weight:700;line-height:1.5}.quiz-options{flex-direction:column;gap:8px;width:100%;display:flex}.quiz-opt{border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--surface);width:100%;color:var(--text2);cursor:pointer;text-align:left;transition:var(--transition);padding:13px 16px;font-family:DM Sans,sans-serif;font-size:19px;font-weight:500}.quiz-opt:hover{border-color:var(--purple);color:var(--text);background:#7c5ce71a;transform:translate(3px)}.quiz-counter{color:var(--text4);font-size:17px}.reset-btn{border:1.5px solid var(--border);color:var(--text3);cursor:pointer;transition:var(--transition);background:0 0;border-radius:50px;padding:9px 22px;font-family:DM Sans,sans-serif;font-size:18px;font-weight:600}.reset-btn:hover{background:var(--surface2);border-color:var(--border2);color:var(--text)}.result-area{flex-direction:column;align-items:center;gap:10px;width:100%;animation:.35s fadeUp;display:flex}.mood-result-card{box-sizing:border-box;background:linear-gradient(135deg,var(--surface) 60%,#7c5ce714);border:2px solid var(--accent,var(--purple));border-radius:var(--radius-lg);text-align:center;width:100%;padding:20px 16px;box-shadow:0 4px 24px #0000004d}.mood-emoji{margin-bottom:8px;font-size:41px;line-height:1}.mood-label{color:var(--text);margin:0 0 10px;font-family:Syne,sans-serif;font-size:21px;font-weight:700}.mood-tags{flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:10px;display:flex}.mood-tag{color:var(--purple-l);background:#7c5ce726;border:1px solid #7c5ce740;border-radius:20px;padding:4px 12px;font-size:17px;font-weight:600}.mood-reasoning{color:var(--text3);border-radius:var(--radius-sm);background:#7c5ce70f;max-width:300px;margin:0 auto;padding:8px 12px;font-size:17px;font-style:italic;line-height:1.6}.mood-meters{flex-direction:column;gap:8px;margin-top:10px;display:flex}.meter-row{align-items:center;gap:8px;display:flex}.meter-lbl{color:var(--text3);text-align:right;width:52px;font-size:16px;font-weight:600}.meter-bar{background:var(--surface2);border-radius:3px;flex:1;height:6px;overflow:hidden}.meter-fill{border-radius:3px;height:100%;transition:width .6s}.meter-val{color:var(--text3);width:32px;font-size:16px;font-weight:600}.confidence-note{color:var(--text4);font-size:16px}.continue-btn{border-radius:var(--radius-md);background:linear-gradient(135deg,var(--purple),#a855f7);color:#fff;cursor:pointer;width:100%;transition:var(--transition);letter-spacing:.01em;border:none;padding:14px;font-family:Syne,sans-serif;font-size:20px;font-weight:700;box-shadow:0 4px 20px #7c5ce766}.continue-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px #7c5ce78c}.cocreate{width:100%;max-width:480px;margin:0 auto;animation:.35s fadeUp}.cc-header{text-align:center;margin-bottom:2rem}.cc-mood-tag{color:var(--purple-l);background:#7c5ce71f;border:1px solid #7c5ce740;border-radius:20px;margin-bottom:.75rem;padding:4px 14px;font-size:17px;font-weight:600;display:inline-block}.cc-headline em{background:linear-gradient(135deg,#a78bfa,#f472b6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:italic}.cc-sub{color:var(--text3);margin-top:.4rem;font-size:18px}.cc-section{margin-bottom:1.75rem}.cc-section-top{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.cc-label{color:var(--text4);text-transform:uppercase;letter-spacing:.09em;font-family:Syne,sans-serif;font-size:18px;font-weight:700}.cc-value{color:var(--text3);font-size:17px}.cc-value em{color:var(--text2);font-style:italic}.cc-slider-wrap{flex-direction:column;gap:6px;display:flex}.cc-slider{appearance:none;background:linear-gradient(to right, var(--purple) 0%, var(--purple) var(--val,50%), var(--surface2) var(--val,50%), var(--surface2) 100%);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}.cc-slider::-webkit-slider-thumb{appearance:none;background:var(--purple-l);border:2px solid var(--bg);cursor:pointer;border-radius:50%;width:20px;height:20px;box-shadow:0 0 10px #7c5ce780}.cc-slider-ticks{color:var(--text4);justify-content:space-between;padding:0 2px;font-size:15px;display:flex}.cc-scale-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.cc-scale-opt{text-align:left;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);flex-direction:column;gap:2px;padding:12px 14px;font-family:DM Sans,sans-serif;display:flex}.cc-scale-opt:hover,.cc-scale-opt.sel{border-color:var(--purple);background:#7c5ce71f}.cso-name{color:var(--text);font-size:18px;font-weight:600}.cso-feel{color:var(--text3);font-size:16px}.cc-scale-opt.sel .cso-feel{color:var(--text2)}.cc-instr-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.cc-instr{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);flex-direction:column;align-items:center;gap:5px;padding:12px 6px;font-family:DM Sans,sans-serif;display:flex}.cc-instr:hover,.cc-instr.sel{border-color:var(--purple);background:#7c5ce71f}.ci-emoji{font-size:25px}.ci-label{color:var(--text3);font-size:16px;font-weight:600}.cc-instr.sel .ci-label{color:var(--purple-l)}.cc-cta{background:linear-gradient(135deg,var(--purple),#a855f7);border-radius:var(--radius-md);color:#fff;cursor:pointer;width:100%;transition:var(--transition);letter-spacing:.01em;border:none;margin-bottom:.6rem;padding:14px;font-family:Syne,sans-serif;font-size:20px;font-weight:700;box-shadow:0 4px 20px #7c5ce766}.cc-cta:hover{transform:translateY(-2px);box-shadow:0 8px 28px #7c5ce78c}.cc-xp{color:var(--text4);text-align:center;font-size:16px}.cc-artist-grid{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:4px;display:grid}.cc-artist-opt{border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;text-align:left;transition:var(--transition);flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;font-family:DM Sans,sans-serif;display:flex}.cc-artist-opt:hover{border-color:var(--purple);background:#7c5ce714}.cc-artist-opt.sel{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple);background:#7c5ce726}.cao-emoji{font-size:23px;line-height:1}.cao-label{color:var(--text);font-size:17px;font-weight:700;line-height:1.2}.cao-desc{color:var(--text3);margin-top:1px;font-size:15px;line-height:1.3}.cc-artist-loading{color:var(--text3);text-align:center;padding:12px 0;font-size:18px}.reward-badge{z-index:200;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#07050feb;border:1px solid #7c5ce766;border-radius:50px;align-items:center;gap:10px;padding:.65rem 1.25rem;animation:.35s cubic-bezier(.34,1.56,.64,1) slideUp;display:flex;position:fixed;bottom:2rem;right:1.5rem;box-shadow:0 8px 32px #7c5ce74d}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.rb-dot{background:linear-gradient(135deg,var(--purple),#a855f7);border-radius:50%;flex-shrink:0;width:8px;height:8px;box-shadow:0 0 8px #7c5ce799}.rb-label{color:var(--purple-l);font-family:Syne,sans-serif;font-size:18px;font-weight:700}.rb-sub{color:var(--text3);font-size:16px}.rh-root{width:100%;max-width:480px;margin:0 auto;padding-bottom:40px;font-family:DM Sans,sans-serif;animation:.35s fadeUp}.rh-header{text-align:center;margin-bottom:20px}.rh-headline em{background:linear-gradient(135deg,#a78bfa,#f472b6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:italic}.rh-sub{color:var(--text3);margin-top:4px;font-size:18px}.rh-tabs{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);gap:4px;margin-bottom:20px;padding:5px;display:flex}.rh-tab{border-radius:var(--radius-sm);color:var(--text3);cursor:pointer;transition:var(--transition);background:0 0;border:none;flex:1;padding:10px 4px;font-family:DM Sans,sans-serif;font-size:18px;font-weight:600}.rh-tab.active{color:var(--purple-l);background:#7c5ce733;box-shadow:0 2px 8px #7c5ce726}.rh-songs-panel{flex-direction:column;gap:12px;display:flex}.rh-filters{flex-wrap:wrap;gap:6px;padding-bottom:4px;display:flex}.rh-filter-pill{border:1.5px solid var(--border);color:var(--text3);cursor:pointer;transition:var(--transition);background:0 0;border-radius:20px;padding:6px 14px;font-family:DM Sans,sans-serif;font-size:17px;font-weight:600}.rh-filter-pill.active{border-color:var(--purple);color:var(--purple-l);background:#7c5ce726}.rh-song-list{flex-direction:column;gap:10px;display:flex}.rh-song-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);transition:var(--transition);overflow:hidden}.rh-song-card:hover{border-color:var(--region-color,var(--purple));box-shadow:0 4px 20px #0000004d}.rh-song-top{cursor:pointer;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.rh-song-left{align-items:center;gap:12px;display:flex}.rh-song-emotion{font-size:29px;line-height:1}.rh-song-mood{color:var(--text);margin:0 0 3px;font-family:Syne,sans-serif;font-size:19px;font-weight:700}.rh-song-meta{color:var(--text3);align-items:center;gap:5px;font-size:16px;display:flex}.rh-song-region{color:var(--region-color,var(--purple-l));font-weight:700}.rh-song-right{align-items:center;gap:10px;display:flex}.rh-play-btn{border:1.5px solid var(--region-color,var(--purple));width:36px;height:36px;color:var(--region-color,var(--purple-l));cursor:pointer;transition:var(--transition);background:#7c5ce71a;border-radius:50%;justify-content:center;align-items:center;font-size:19px;display:flex}.rh-play-btn:hover{background:#7c5ce740;transform:scale(1.08)}.rh-play-btn.playing{background:var(--region-color,var(--purple));color:#fff}.rh-song-chevron{color:var(--text4);font-size:15px}.rh-song-expanded{border-top:1px solid var(--border);padding:0 16px 16px;animation:.2s fadeDown}@keyframes fadeDown{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.rh-lyrics{margin-top:12px}.rh-lyrics-label{color:var(--text4);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;font-family:Syne,sans-serif;font-size:16px;font-weight:700}.rh-lyrics-text{color:var(--text2);white-space:pre-wrap;max-height:180px;padding-right:4px;font-family:DM Sans,sans-serif;font-size:18px;line-height:1.8;overflow-y:auto}.rh-song-stats{flex-direction:column;gap:6px;margin-top:12px;display:flex}.rh-stat{align-items:center;gap:8px;display:flex}.rh-stat-label{color:var(--text3);text-transform:uppercase;letter-spacing:.05em;width:52px;font-family:Syne,sans-serif;font-size:16px;font-weight:700}.rh-stat-bar{background:var(--surface2);border-radius:3px;flex:1;height:5px;overflow:hidden}.rh-stat-fill{border-radius:3px;height:100%;transition:width .5s}.rh-loading{color:var(--text3);flex-direction:column;align-items:center;gap:12px;padding:48px 0;font-size:19px;display:flex}.rh-spinner{border:2px solid #7c5ce733;border-top-color:var(--purple);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}.rh-empty{text-align:center;padding:56px 20px}.rh-empty-icon{margin-bottom:12px;font-size:49px}.rh-empty-text{color:var(--text2);margin-bottom:6px;font-family:Syne,sans-serif;font-size:21px;font-weight:700}.rh-empty-sub{color:var(--text3);font-size:18px}.rh-rewards-panel{flex-direction:column;gap:24px;display:flex}.rh-xp-card{border-radius:var(--radius-md);background:#7c5ce71a;border:1px solid #7c5ce740;padding:18px}.rh-xp-top{justify-content:space-between;margin-bottom:12px;display:flex}.rh-xp-label{color:var(--text3);text-transform:uppercase;letter-spacing:.07em;font-family:Syne,sans-serif;font-size:16px;font-weight:700}.rh-xp-val{background:linear-gradient(135deg,var(--purple-l),#f472b6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-family:Syne,sans-serif;font-size:25px;font-weight:800}.rh-bar-bg{background:var(--surface2);border-radius:4px;height:7px;overflow:hidden}.rh-bar-fill{background:linear-gradient(90deg,var(--purple),#a855f7);border-radius:4px;height:100%;transition:width .6s}.rh-next{color:var(--text3);margin-top:8px;font-size:17px}.rh-next em{color:var(--text2);font-style:normal;font-weight:700}.rh-section{flex-direction:column;gap:10px;display:flex}.rh-section-label{color:var(--text4);text-transform:uppercase;letter-spacing:.07em;font-family:Syne,sans-serif;font-size:18px;font-weight:700}.rh-calendar{gap:6px;display:flex}.rh-day{flex-direction:column;flex:1;align-items:center;gap:5px;display:flex}.rh-dot{background:var(--surface2);border:1.5px solid var(--border);width:30px;height:30px;transition:var(--transition);border-radius:50%}.rh-day.active .rh-dot{border-color:var(--purple);background:#7c5ce740}.rh-day.today .rh-dot{background:var(--purple);border-color:#a855f7;box-shadow:0 0 12px #7c5ce799}.rh-day-label{color:var(--text4);font-size:15px;font-weight:700}.rh-day.active .rh-day-label{color:var(--text3)}.rh-day.today .rh-day-label{color:var(--purple-l)}.rh-badges{flex-direction:column;gap:8px;display:flex}.rh-badge{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);transition:var(--transition);align-items:center;gap:12px;padding:14px 16px;display:flex}.rh-badge.earned{background:#a855f712;border-color:#a855f74d}.rb-emoji{text-align:center;width:28px;font-size:27px;line-height:1}.rb-name{color:var(--text);flex:1;font-family:Syne,sans-serif;font-size:18px;font-weight:700}.rh-badge.locked .rb-name{color:var(--text4)}.rb-desc{color:var(--text3);font-size:16px}.rh-region-stats{flex-direction:column;gap:10px;display:flex}.rh-region-row{align-items:center;gap:10px;display:flex}.rh-region-name{color:var(--text2);width:100px;font-size:17px;font-weight:600}.rh-region-bar{background:var(--surface2);border-radius:3px;flex:1;height:6px;overflow:hidden}.rh-region-fill{border-radius:3px;height:100%;transition:width .6s}.rh-region-count{color:var(--text3);text-align:right;width:16px;font-size:16px;font-weight:700}.subscribe-btn{color:#fff;cursor:pointer;background:linear-gradient(90deg,#6a5cff,#8f7bff);border:0;border-radius:8px;padding:8px 12px;font-weight:600;transition:transform .12s,opacity .12s;box-shadow:0 4px 12px #5040c81f}.subscribe-btn:hover{transform:translateY(-2px)}.subscribe-btn:active{transform:translateY(0)}.subscribe-btn:disabled,.subscribe-btn--disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.billing-portal-btn{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff14;border-radius:8px;padding:6px 10px;font-weight:600;transition:background .12s,opacity .12s}.billing-portal-btn:disabled{opacity:.5;cursor:not-allowed}.plan-badge{color:#fff;background:#ffffff0f;border-radius:999px;align-items:center;margin-right:6px;padding:6px 10px;font-size:18px;font-weight:600;display:inline-flex}.plan-badge--active{color:#fff;background:linear-gradient(90deg,#00c6a7,#00b4ff)}.plan-badge--inactive{color:#ddd;background:#ffffff0a}.plan-badge--loading{opacity:.7;font-style:italic}@media (width<=760px){.subscribe-btn,.billing-portal-btn{padding:6px 8px;font-size:18px}}@media (width<=768px){body{font-size:21px}.ob-headline{font-size:1.45rem!important}.generating-screen{padding:24px 16px}.gen-label{font-size:1.1rem}}@media (width<=640px){.cc-instr-grid{grid-template-columns:repeat(2,1fr);gap:8px}.cc-instr{padding:10px 6px;font-size:16px}}@media (width<=480px){.ekko-header{padding:10px 14px;padding-top:max(10px, env(safe-area-inset-top));gap:8px}.ekko-main{padding:16px 14px 40px}.ekko-main.ekko-main--wide{padding-left:14px;padding-right:14px}.ekko-main.ekko-main--onboarding{padding:20px 14px 32px}.ekko-logo-word{font-size:23px}body.ekko-rtl .ekko-logo-word{font-size:22px}.ekko-region-tag{max-width:min(160px,38vw);padding:2px 8px;font-size:16px}.ekko-lang-tag{display:none}.nav-history-btn{padding:6px 10px;font-size:18px}.back-btn-wrap{margin-bottom:14px}.back-button{font-size:18px}.rh-badges{grid-template-columns:1fr}.auth-shell{padding:16px!important}.auth-hook{margin-bottom:1.25rem;font-size:18px}.auth-headline{font-size:31px}}@media (width<=380px){.ekko-region-tag{display:none}}.auth-shell{min-height:100dvh;padding:max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom))}.ekko-survey-gate{left:50%;bottom:max(20px, env(safe-area-inset-bottom));z-index:250;background:linear-gradient(135deg,#1e143cf7,#140e2dfa);border:1px solid #a855f773;border-radius:14px;align-items:flex-start;gap:12px;max-width:min(420px,100vw - 32px);padding:14px 18px;animation:.28s ekkoSurveyGateIn;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 12px 40px #0000008c}.ekko-survey-gate__icon{flex-shrink:0;margin-top:1px;font-size:25px;line-height:1}.ekko-survey-gate__text{color:#e0d8ff;margin:0;font-family:DM Sans,Segoe UI,sans-serif;font-size:19px;font-weight:600;line-height:1.5}@keyframes ekkoSurveyGateIn{0%{opacity:0;transform:translate(-50%)translateY(12px)}to{opacity:1;transform:translate(-50%)translateY(0)}}html[dir=rtl] .ekko-survey-gate{text-align:right}html[dir=rtl] .back-button:hover{transform:translate(2px)}html[dir=rtl] .ob-region,html[dir=rtl] .lp-item{text-align:right}html[dir=rtl] .ob-region-bar{border-radius:3px 0 0 3px;left:auto;right:0}html[dir=rtl] .auth-toggle span{margin-inline-start:4px}