@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('/fonts/thmanyahserifdisplay-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Thmanyah Serif Text';src:url('/fonts/thmanyahseriftext-Regular.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  /* ===== Design tokens — visual comfort system (v116) ===== */
  --bg:#0C0E0D; --bg-deep:#090B0A;
  --surface:#141716; --surface2:#1A1D1B; --surface3:#21241F;
  --field:#0F1211;
  --line:rgba(255,255,255,.075); --line-strong:rgba(255,255,255,.13);
  --ink:#F2F4F1; --ink2:#B9C2BC; --muted:#8E9791;
  --accent:#22B573; --accent-bright:#63DFA8; --accent-deep:#177A4C;
  --accent-soft:rgba(34,181,115,.13); --accent-glow:rgba(34,181,115,.14);
  --gold:#D9A83E; --gold-soft:rgba(217,168,62,.13);
  --danger:#E8837A; --danger-bright:#F0958C; --danger-soft:rgba(232,131,122,.12);
  --ok:#5CC98A; --ok-soft:rgba(92,201,138,.12);
  --sans:'Thmanyah Sans',system-ui,sans-serif;
  --serif:'Thmanyah Serif Display','Thmanyah Serif Text',serif;
  --r:20px; --r-sm:14px;
  --shadow:0 18px 44px rgba(0,0,0,.38);
  --shadow-sm:0 6px 20px rgba(0,0,0,.26);
  --hi:inset 0 1px 0 rgba(255,255,255,.04);
  --rail:252px;
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
.container{max-width:1020px;margin-inline:auto;padding-inline:20px}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer}
button,a,.chip,.voice-card,.tab,.rail-link{touch-action:manipulation}
input,select,textarea{font-family:inherit;font-size:15.5px;color:var(--ink);max-width:100%}
img{max-width:100%}
audio{max-width:100%}
::selection{background:var(--accent-soft);color:var(--accent-deep)}
:focus-visible{outline:3px solid rgba(34,181,115,.45);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#BFC7BB;border-radius:99px;border:2px solid var(--bg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:12px;padding:11px 20px;font-weight:800;font-size:15.5px;text-decoration:none;transition:background .15s,box-shadow .15s,transform .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:19px;height:19px}
.btn-lg{padding:14px 26px;font-size:16.5px;border-radius:13px}
.btn.sm{padding:7px 14px;font-size:14px;border-radius:9px}
.btn.sm svg{width:16px;height:16px}
.btn.block{width:100%}
.btn.grow{flex:1}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-deep)}
.btn-primary:disabled{opacity:.55;cursor:wait;box-shadow:none}
.btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--ink2)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--surface2)}

/* ---------- header / rail ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(245,246,243,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:14px;height:64px;max-width:1020px;margin-inline:auto;padding-inline:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{border-radius:9px;flex-shrink:0}
.brand-name{font-family:var(--serif);font-weight:900;font-size:25px}
.brand-name.sm-name{font-size:20px}
.nav-links{display:none}
.nav-actions{display:flex;align-items:center;gap:9px;margin-inline-start:auto}
.user-chip{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14.5px}
.user-chip svg{width:20px;height:20px;color:var(--accent)}
.plan-chip{background:var(--gold-soft);color:var(--gold);border-radius:99px;padding:2px 11px;font-size:12.5px;font-weight:900}
.rail-link{display:flex;align-items:center;gap:11px;width:100%;padding:12px 14px;border:none;border-radius:12px;background:transparent;color:var(--ink2);font-weight:800;font-size:15.5px;text-align:start;transition:background .15s,color .15s}
.rail-link svg{width:20px;height:20px}
.rail-link:hover{background:var(--surface2);color:var(--ink)}
.rail-link.active{background:var(--accent-soft);color:var(--accent-deep)}

/* ---------- tab bar (mobile) ---------- */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 8px;border:none;background:transparent;color:var(--ink2);font-weight:800;font-size:12.5px}
.tab svg{width:22px;height:22px}
.tab.active{color:var(--accent-deep)}

/* ---------- views ---------- */
.view{display:none}
.view.active{display:block}
.page{padding-top:34px;padding-bottom:60px}
.section-head{max-width:620px;margin-bottom:26px}
.section-head h2{font-family:var(--serif);font-weight:900;font-size:clamp(25px,3.4vw,33px);line-height:1.3}
.section-head p{color:var(--ink2);font-size:16.5px;margin-top:8px}
.section-head.faq-head{margin-top:44px}

/* ---------- try view ---------- */
.try-intro{max-width:640px;margin-bottom:24px}
.try-intro h1{font-family:var(--serif);font-weight:900;font-size:clamp(27px,4vw,38px);line-height:1.4}
.try-intro h1 .accent{color:var(--accent)}
.try-intro p{color:var(--ink2);font-size:16.5px;margin-top:10px}
.account-bar{margin-bottom:16px}
.account-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:11px 17px;font-weight:800;font-size:14.5px;box-shadow:var(--shadow-sm);max-width:100%}
.account-card svg{width:19px;height:19px;color:var(--accent)}
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
.tools-grid>*{min-width:0}
.trust-row{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:6px;color:var(--ink2);font-weight:800;font-size:14px}
.trust-row span{display:inline-flex;align-items:center;gap:7px}
.trust-row svg{width:17px;height:17px;color:var(--accent)}

/* ---------- cards & forms ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px;box-shadow:var(--shadow-sm);min-width:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.card-head h3{font-size:17.5px;font-weight:900;display:flex;gap:8px;align-items:center}
.card-head h3 svg{width:20px;height:20px;color:var(--accent-deep)}
.note-card h3{font-size:17px;font-weight:900;display:flex;gap:8px;align-items:center;margin-bottom:8px}
.note-card h3 svg{width:20px;height:20px;color:var(--accent-deep)}
.note-card p{color:var(--ink2);font-size:15px;margin-bottom:14px}
.muted{color:var(--ink2);font-size:14.5px;margin-bottom:12px}
.fld-label{display:block;font-weight:900;font-size:14px;margin:18px 0 9px}
.fld-label:first-of-type{margin-top:4px}
.card input[type=text],.card input[type=email],.card input[type=password],.card select,.btn-google { background:#fff; color:#1F2937; border:1px solid #D8DDD6; font-weight:800; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; }
.btn-google:hover { background:#F4F6F3; }
.auth-or { display:flex; align-items:center; gap:12px; margin:14px 0 2px; color:var(--ink2); font-size:12.5px; }
.auth-or::before, .auth-or::after { content:''; flex:1; height:1px; background:var(--line); }
.auth-form input,textarea{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px}
textarea{line-height:1.9;resize:vertical}
.card input:focus,.card select:focus,.auth-form input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.card input,.card select{margin-bottom:10px}
input[type=file]{width:100%;font-size:14px;margin-bottom:10px}
.textarea-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink2);font-size:13px;margin-top:6px}
.improve-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(34,181,115,.12);border:1px solid rgba(34,181,115,.35);color:var(--accent-bright);border-radius:999px;padding:5px 12px;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:transform .15s}
.improve-btn svg{width:15px;height:15px}
.improve-btn:active{transform:scale(.96)}
.improve-btn[disabled]{opacity:.55}
.agent-box{margin-top:14px}
.agent-fields{display:flex;gap:9px;flex-wrap:wrap}
.agent-fields input{flex:1 1 150px;width:auto;margin-bottom:0}
.composer-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.composer-actions select{width:auto;flex:0 1 210px;margin-bottom:0}
.alert{background:var(--danger-soft);border:1.5px solid var(--danger);color:var(--danger);border-radius:11px;padding:11px 15px;font-weight:800;font-size:14.5px;margin-top:14px}
.alert.ok{background:var(--ok-soft);border-color:var(--ok);color:#26591F}
.result-box{margin-top:16px;border:1.5px solid var(--ok);background:#FBFDF8;border-radius:13px;padding:15px}
.result-head{font-weight:900;color:#26591F;display:flex;align-items:center;gap:8px}
.result-box audio{width:100%;margin:11px 0}

/* ---------- chips & tags ---------- */
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:99px;padding:8px 17px;font-weight:800;font-size:14px;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--ink2)}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.tag{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 11px;font-size:12.5px;font-weight:900;white-space:nowrap}
.tag svg{width:13px;height:13px}
.tag.dialect{background:#F3E3BC;color:#7C5205}
.tag.d-oranian{background:#D8EDE4;color:#0B5C40}
.tag.d-setifian{background:#F6E3CB;color:#7C4A0D}
.tag.d-annabi{background:#F9DEDA;color:#933021}
.tag.d-saharan{background:#F1EAC0;color:#6D5607}
.tag.designed{background:#E6EAE6;color:#44503F}
.tag.premium{background:#F7ECD2;color:#8A6410;border:1px solid rgba(217,168,62,.45)}

/* ---------- voices ---------- */
.voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(255px,100%),1fr));gap:14px}
.voice-grid.compact{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:10px}
.voice-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:18px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;min-width:0}
.voice-card:hover{border-color:#B9C4B4;box-shadow:var(--shadow-sm)}
.voice-card.selected{border-color:var(--accent);background:#FBFEFC;box-shadow:0 0 0 3px var(--accent-soft)}
.voice-top{display:flex;align-items:center;gap:12px}
.avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font-weight:900;font-size:19px;color:var(--ink);font-family:var(--serif);flex-shrink:0}
.avatar.female{background:#F6DCCB}
.avatar.male{background:#D5E8D2}
.avatar.custom{background:#E9E2CC}
.voice-name{font-weight:900;font-size:17px;line-height:1.3}
.voice-model{font-size:12.5px;color:var(--ink2);font-weight:700}
.voice-desc{font-size:14px;color:var(--ink2);margin:11px 0 13px;min-height:42px}
.voice-tags{display:flex;gap:6px;flex-wrap:wrap}
.voice-grid.compact .voice-card{padding:13px 14px}
.voice-grid.compact .voice-desc{display:none}
.voice-grid.compact .avatar{width:38px;height:38px;font-size:15px}
.voice-grid.compact .voice-name{font-size:15px}
.voice-list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.voice-list .voice-card{border:none;border-bottom:1px solid var(--line);border-radius:0;padding:15px 20px;display:flex;align-items:center;gap:14px;box-shadow:none}
.voice-list .voice-card:last-child{border-bottom:none}
.voice-list .voice-card:hover{transform:none;background:#FBFCFA;box-shadow:none}
.voice-list .voice-card.selected{box-shadow:inset 0 0 0 2px var(--accent)}
.voice-list .voice-top{flex:0 1 210px;min-width:0}
.voice-list .voice-desc{flex:1;margin:0;min-height:0}
.voice-list .voice-tags{flex-shrink:0}
.voice-list .empty{border:none}
.empty{border:1.5px dashed var(--line);border-radius:var(--r);padding:28px;text-align:center;color:var(--ink2);font-weight:700;background:var(--surface)}

/* ---------- plans ---------- */
.plan-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.plan-list>*{min-width:0}
.plan-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:24px 22px;display:flex;flex-direction:column;gap:12px}
.plan-card h3{font-size:18px;font-weight:900}
.plan-card.hot{border-color:var(--accent);box-shadow:var(--shadow)}
.plan-price{font-family:var(--serif);font-weight:900;font-size:31px;color:var(--accent-deep)}
.plan-price small{font-family:var(--sans);font-size:13.5px;color:var(--ink2);font-weight:700}
.plan-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1}
.plan-card li{display:flex;gap:8px;align-items:flex-start;font-size:14.5px}
.plan-card li svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;margin-top:4px}

/* ---------- history ---------- */
.history-item{display:flex;gap:13px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap;min-width:0}
.history-item .meta{flex:1;min-width:0}
.history-item .meta b{display:block;font-size:15px}
.history-item .meta span{display:block;color:var(--ink2);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-item audio{flex:1 1 100%;width:100%;height:38px}

/* ---------- billing & orders ---------- */
.billing-plan{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.order-item{padding:12px 0;border-bottom:1px solid var(--line)}
.order-item .row{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14.5px}
.order-item .actions{display:flex;gap:9px;margin-top:10px;align-items:center;flex-wrap:wrap}
.status{font-weight:900;font-size:12.5px;border-radius:99px;padding:3px 12px;white-space:nowrap}
.status.pending{background:var(--gold-soft);color:var(--gold)}
.status.proof_uploaded{background:#E2E9F5;color:#3D5A99}
.status.paid{background:var(--ok-soft);color:var(--ok)}
.status.rejected{background:var(--danger-soft);color:var(--danger)}

/* ---------- about & faq ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:start}
.about-text p{color:var(--ink2);font-size:16.5px;margin-bottom:15px}
.about-text p b{color:var(--ink)}
.about-facts{display:flex;flex-direction:column;gap:12px}
.fact{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.fact b{font-family:var(--serif);font-weight:900;font-size:27px;color:var(--accent-deep);min-width:52px;text-align:center}
.fact span{font-size:14.5px;color:var(--ink2);padding-top:5px}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:13px;margin-bottom:10px;padding:4px 18px}
.faq summary{font-weight:900;font-size:16px;padding:12px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq p{color:var(--ink2);padding-bottom:14px;font-size:15px}
.mini-footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink2);font-size:14px}
.mini-footer .brand{gap:8px}

/* ---------- modal & toast ---------- */
.modal{position:fixed;inset:0;background:rgba(18,24,20,.62);display:grid;place-items:center;z-index:80;padding:16px}
.modal-box{background:var(--surface);border-radius:18px;max-width:430px;width:100%;padding:26px;position:relative;box-shadow:var(--shadow);max-height:92dvh;overflow-y:auto}
.modal-brand{display:flex;align-items:center;gap:10px;justify-content:center;font-family:var(--serif);font-weight:900;font-size:23px;margin-bottom:18px}
.modal-brand img{border-radius:9px}
.modal-close{position:absolute;top:12px;inset-inline-end:12px;width:34px;height:34px;border-radius:50%;background:var(--surface2);color:var(--ink);border:none;display:grid;place-items:center}
.modal-close svg{width:17px;height:17px}
.modal-tabs{display:flex;gap:8px;margin-bottom:18px}
.mtab{flex:1;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:9px;font-weight:900;font-size:15px}
.mtab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.auth-form{display:flex;flex-direction:column;gap:13px}
.auth-form label{font-weight:800;font-size:14px;display:flex;flex-direction:column;gap:6px}
.auth-form .alert{margin-top:0}
.toast{position:fixed;bottom:86px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-weight:800;padding:12px 22px;border-radius:99px;box-shadow:var(--shadow);z-index:90;font-size:15px;max-width:92vw;text-align:center}

/* ---------- desktop rail ---------- */
@media (min-width:1024px){
  body{padding-inline-start:var(--rail)}
  .topbar{position:fixed;top:0;bottom:0;inset-inline-start:0;width:var(--rail);border-bottom:none;border-inline-end:1px solid var(--line);background:var(--surface)}
  .nav{flex-direction:column;align-items:stretch;height:100%;max-width:none;margin:0;padding:24px 18px;gap:30px}
  .nav-links{display:flex;flex-direction:column;gap:5px}
  .nav-actions{margin-top:auto;margin-inline-start:0;flex-wrap:wrap}
  .nav-actions .btn{flex:1}
  #navUser{flex-direction:column;align-items:stretch}
  #navUser .btn{width:100%}
  .user-chip{padding:2px 6px}
  .tabbar{display:none}
  .toast{bottom:24px}
  .page{padding-top:42px}
}

/* ---------- mobile ---------- */
@media (max-width:1023px){
  body{padding-bottom:64px}
}
@media (max-width:900px){
  .about-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .tools-grid{grid-template-columns:1fr}
  .plan-list{grid-template-columns:1fr}
}
@media (max-width:720px){
  input,select,textarea{font-size:16px}
  .btn{min-height:46px}
  .brand-name{font-size:22px}
  .nav{height:60px;padding-inline:16px}
  .nav-actions .btn{padding:9px 14px;font-size:14px;min-height:42px}
  .page{padding-top:24px}
  .filter-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filter-chips::-webkit-scrollbar{display:none}
  .filter-chips .chip{flex-shrink:0}
  #toneChips{flex-wrap:wrap;overflow:visible}
  .voice-list .voice-card{flex-wrap:wrap;padding:14px 16px}
  .voice-list .voice-top{flex:1 1 100%}
  .voice-list .voice-desc{flex:1 1 100%}
  .account-card{width:100%}
  .card{padding:17px}
  .composer-actions{flex-direction:column}
  .composer-actions select{width:100%;flex:none}
  .composer-actions .btn{width:100%}
  .agent-fields{flex-direction:column}
  .agent-fields .btn{width:100%}
  .billing-plan{flex-direction:column;align-items:stretch}
  .billing-plan .btn{width:100%}
  .order-item .row{flex-direction:column;align-items:flex-start;gap:6px}
  .fact b{min-width:44px}
}
@media (max-width:640px){
  #navUserName,.plan-chip{display:none}
  .user-chip{padding:4px 2px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- feature additions ---------- */
.voice-tools{display:flex;gap:6px;margin-inline-start:auto;flex-shrink:0}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink2);padding:0}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{border-color:var(--ink2);color:var(--ink)}
.fav-btn.on{color:var(--gold);border-color:rgba(217,168,62,.45);background:var(--gold-soft)}
.preview-btn.playing{background:var(--accent);border-color:var(--accent);color:#fff}
.result-actions{display:flex;gap:9px;flex-wrap:wrap}
.dialog-row select{margin-bottom:0}
#templateChips{margin-bottom:4px}
.billing-btns{display:inline-flex;gap:8px;flex-wrap:wrap}

/* ---------- admin panel ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:12px;margin-bottom:16px}
.stats-grid>*{min-width:0}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm)}
.stat-card b{display:block;font-family:var(--serif);font-weight:900;font-size:26px;color:var(--accent-deep)}
.stat-card span{font-size:13px;color:var(--ink2);font-weight:800}
.provider-status{display:flex;flex-direction:column;gap:9px;font-size:14.5px;font-weight:700}
.provider-status .row{display:flex;align-items:center;gap:9px}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot.on{background:var(--ok)}
.dot.off{background:var(--danger)}
.provider-status .note{color:var(--ink2);font-weight:600;font-size:13.5px}
.user-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:13px 0;border-bottom:1px solid var(--line)}
.user-row .info{flex:1;min-width:180px}
.user-row .info b{display:block;font-size:15px}
.user-row .info span{color:var(--ink2);font-size:13px}
.user-row select{width:auto;margin-bottom:0;padding:8px 10px}
.preview-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.preview-list .tag{font-size:13px;padding:5px 13px}
@media (max-width:720px){.stats-grid{grid-template-columns:1fr 1fr}.user-row select{flex:1}}

/* music mix (result box) */
.music-mix { margin-top: 14px; border-top: 1px dashed var(--line, #ddd); padding-top: 12px; }
.music-mix label { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.92rem; margin-bottom: 8px; }
.music-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.music-row select { flex: 1 1 130px; min-width: 0; padding: 9px; border-radius: 10px; border: 1px solid var(--line, #ddd); font-size: 16px; }
.music-row input[type="range"] { flex: 1 1 90px; min-width: 0; }
.music-mix .hint { font-size: 0.8rem; opacity: 0.75; margin-top: 6px; }

/* ===== Studio workspace (ElevenLabs-style, restructured) ===== */
.studio-head { margin-bottom: 14px; }
.studio-head h1 { font-size: 1.45rem; margin: 0 0 4px; }
.studio-head p { margin: 0; opacity: .78; font-size: .95rem; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.studio-grid .card, .studio-bottom .card { margin-bottom: 0; }
.controls-card { display: flex; flex-direction: column; }
.controls-card .fld-label { margin-top: 14px; }
.controls-card .fld-label:first-child { margin-top: 0; }
.controls-card #studioVoices { grid-template-columns: minmax(0, 1fr); max-height: 300px; overflow-y: auto; padding-inline-end: 2px; }
.project-row { display: flex; gap: 8px; }
.project-row select { flex: 1 1 auto; min-width: 0; }
.controls-foot { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.chips-scroll .chip { flex: 0 0 auto; }
.fold { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 10px; }
.fold summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 6px; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold .agent-fields { margin-top: 12px; }
.studio-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.studio-side-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.history-card .history-list { max-height: 430px; overflow-y: auto; }
.mobile-gen-bar { display: none; }
@media (min-width: 1024px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr) 350px; }
  .controls-card { position: sticky; top: 16px; }
  .studio-bottom { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .mobile-gen-bar { display: flex; align-items: center; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 55; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(20,40,30,.16); padding: 10px 12px; }
  .mobile-gen-bar span { flex: 1 1 auto; min-width: 0; font-size: .82rem; opacity: .85; }
  .mobile-gen-bar .btn { flex: 0 0 auto; }
  #viewTry .page { padding-bottom: 96px; }
  .controls-card #studioVoices { max-height: 240px; }
}

/* ===== Motion layer (skills: 60fps transform/opacity only, micro-interactions 100–250ms, tiered reduced-motion) ===== */
.studio-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 20px; opacity: .55; }
.eq i { display: block; width: 3.5px; height: 18px; border-radius: 2px; background: var(--accent); transform-origin: bottom; animation: eqBounce .9s ease-in-out infinite alternate; }
.eq i:nth-child(3n) { animation-duration: .7s; animation-delay: -.2s; }
.eq i:nth-child(3n+1) { animation-duration: 1.1s; animation-delay: -.5s; }
.eq i:nth-child(4n) { animation-duration: .55s; animation-delay: -.35s; }
.eq i:nth-child(5n) { animation-duration: 1.3s; animation-delay: -.8s; }
@keyframes eqBounce { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
#composerCard { position: relative; }
#composerCard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px var(--accent-soft), 0 14px 34px rgba(34,181,115,.18); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
#composerCard.generating::after { opacity: 1; }
#composerCard.generating .eq { opacity: 1; }
#composerCard.generating .eq i { animation-duration: .34s; }
#composerCard.generating .eq i:nth-child(3n) { animation-duration: .28s; }
#composerCard.generating .eq i:nth-child(3n+1) { animation-duration: .42s; }
.lucide-loader-circle { animation: spin360 1s linear infinite; }
@keyframes spin360 { to { transform: rotate(360deg); } }
.view.active { animation: viewIn .26s cubic-bezier(.16,1,.3,1) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.result-box:not(.hidden) { animation: viewIn .3s cubic-bezier(.16,1,.3,1) both; }
.btn { transition: transform .12s cubic-bezier(.16,1,.3,1), background .15s, border-color .15s, opacity .15s; }
.btn:active { transform: scale(.97); }
.chip { transition: transform .12s cubic-bezier(.16,1,.3,1), background .15s, color .15s, border-color .15s; }
.chip:active { transform: scale(.94); }
.voice-card { transition: transform .16s cubic-bezier(.16,1,.3,1), border-color .15s, box-shadow .15s; }
.voice-card:hover { transform: translateY(-2px); }
.voice-card:active { transform: scale(.98); }
.voice-card .avatar { position: relative; }
.voice-card.selected .avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: ringFade 1.6s cubic-bezier(.16,1,.3,1) infinite; pointer-events: none; }
@keyframes ringFade { from { opacity: .75; transform: scale(.88); } to { opacity: 0; transform: scale(1.18); } }
.preview-btn.playing { animation: playPulse 1s ease-in-out infinite; }
@keyframes playPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.wave-canvas { width: 100%; height: 72px; display: block; margin: 8px 0 4px; cursor: pointer; border-radius: 10px; background: rgba(34,181,115,.05); }
textarea#scriptText { transition: border-color .18s, box-shadow .18s; }
textarea#scriptText:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .eq i { animation: none !important; transform: scaleY(.6); }
  .voice-card.selected .avatar::after { animation: none !important; opacity: 0; }
}

/* ===== Motion graphics pack: wave hero, step rail, staggered cards, sheen ===== */
html { scroll-behavior: smooth; }
.wave-hero { display: flex; align-items: center; gap: 3px; height: 56px; margin-top: 16px; }
.wave-hero i { flex: 1 1 0; min-width: 0; height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--accent), rgba(34,181,115,.32)); transform: scaleY(var(--a,.4)); transform-origin: center; animation: waveDance var(--d,1s) ease-in-out var(--dl,0s) infinite alternate; }
@keyframes waveDance { from { transform: scaleY(calc(var(--a,.4) * .42)); } to { transform: scaleY(var(--a,.4)); } }
.steps { position: relative; display: flex; justify-content: space-between; padding: 10px 4px 4px; margin-bottom: 8px; }
.steps-track { position: absolute; top: 23px; inset-inline: 30px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.steps-fill { height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.step { display: flex; flex-direction: column; align-items: center; gap: 5px; z-index: 1; flex: 0 0 auto; }
.step-dot { width: 27px; height: 27px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; color: var(--muted); transition: background .3s, border-color .3s, color .3s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.step-label { font-size: .74rem; opacity: .72; font-weight: 600; }
.step.done .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.06); }
.step.active .step-dot { border-color: var(--accent); color: var(--accent); animation: stepPulse 1.5s ease-in-out infinite; }
@keyframes stepPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
#studioVoices .voice-card, #voiceGrid .voice-card { animation: cardIn .38s cubic-bezier(.16,1,.3,1) both; }
#studioVoices .voice-card:nth-child(2), #voiceGrid .voice-card:nth-child(2) { animation-delay: .03s; }
#studioVoices .voice-card:nth-child(3), #voiceGrid .voice-card:nth-child(3) { animation-delay: .06s; }
#studioVoices .voice-card:nth-child(4), #voiceGrid .voice-card:nth-child(4) { animation-delay: .09s; }
#studioVoices .voice-card:nth-child(5), #voiceGrid .voice-card:nth-child(5) { animation-delay: .12s; }
#studioVoices .voice-card:nth-child(6), #voiceGrid .voice-card:nth-child(6) { animation-delay: .15s; }
#studioVoices .voice-card:nth-child(7), #voiceGrid .voice-card:nth-child(7) { animation-delay: .18s; }
#studioVoices .voice-card:nth-child(8), #voiceGrid .voice-card:nth-child(8) { animation-delay: .21s; }
#studioVoices .voice-card:nth-child(n+9), #voiceGrid .voice-card:nth-child(n+9) { animation-delay: .24s; }
.history-list > * { animation: cardIn .32s cubic-bezier(.16,1,.3,1) both; }
.history-list > *:nth-child(2) { animation-delay: .04s; }
.history-list > *:nth-child(3) { animation-delay: .08s; }
.history-list > *:nth-child(4) { animation-delay: .12s; }
.history-list > *:nth-child(n+5) { animation-delay: .16s; }
#composerCard:focus-within::after { opacity: .45; }
#composerCard.generating:focus-within::after { opacity: 1; }
#btnGenerate { position: relative; overflow: hidden; }
#btnGenerate::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.38) 50%, transparent 68%); transform: translateX(130%); animation: sheenSweep 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes sheenSweep { 0% { transform: translateX(130%); } 55%, 100% { transform: translateX(-130%); } }
.result-box:not(.hidden) .result-head svg { animation: popIn .45s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes popIn { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dialog-row:not(.hidden) { animation: viewIn .25s cubic-bezier(.16,1,.3,1) both; }
.alert:not(.hidden) { animation: viewIn .25s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  .wave-hero i { animation: none !important; }
  .step.active .step-dot { animation: none !important; }
  #btnGenerate::before { animation: none !important; opacity: 0; }
}

/* ===== Studio wizard ===== */
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.wizard-step.active.fwd { animation: stepInFwd .32s cubic-bezier(.16,1,.3,1) both; }
.wizard-step.active.bwd { animation: stepInBwd .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes stepInFwd { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes stepInBwd { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
.wizard-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.wizard-nav .btn[disabled] { opacity: .45; pointer-events: none; }
.wz-hint { flex: 1 1 auto; min-width: 0; text-align: center; font-size: .85rem; font-weight: 700; opacity: .8; }
#studioSteps .step { cursor: pointer; }
.shake { animation: shakeX .4s ease both; }
@keyframes shakeX { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
textarea#scriptText.invalid { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,.16); }

/* ===== Wizard fixes: sticky nav, capped voice grid, compact steps ===== */
.wizard-nav { position: sticky; bottom: 10px; z-index: 40; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 26px rgba(20,40,30,.14); padding: 10px 12px; }
@media (max-width: 1023px) {
  .wizard-nav { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
#studioVoices { max-height: 400px; overflow-y: auto; padding-inline-end: 2px; scrollbar-width: thin; }
.wizard-step .fld-label { margin-top: 10px; }
.wizard-step .fld-label:first-child { margin-top: 2px; }

/* ===== Website features: promo banner, WhatsApp FAB, how-it-works, FAQ ===== */
.promo-banner { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #1E9E66, #14684A); color: #fff; padding: 9px 14px; font-weight: 700; font-size: .92rem; animation: bannerIn .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes bannerIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
.promo-banner a { color: #fff; text-decoration: none; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.promo-banner .promo-close { background: rgba(255,255,255,.16); border: 0; color: #fff; border-radius: 8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.wa-fab { position: fixed; inset-inline-end: 14px; bottom: 24px; z-index: 58; display: flex; align-items: center; gap: 7px; background: #25D366; color: #fff; font-weight: 800; text-decoration: none; padding: 12px 18px; border-radius: 999px; box-shadow: 0 10px 26px rgba(18,140,70,.4); animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both; }
.wa-fab:active { transform: scale(.95); }
@media (max-width: 1023px) { .wa-fab { bottom: calc(150px + env(safe-area-inset-bottom)); } }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
.how-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 16px 14px; box-shadow: var(--shadow-sm); }
.how-card .how-num { position: absolute; top: 12px; inset-inline-end: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.how-card svg { color: var(--accent); width: 26px; height: 26px; }
.how-card h3 { margin: 8px 0 4px; font-size: 1.02rem; }
.how-card p { margin: 0; font-size: .9rem; opacity: .82; }
details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; margin-bottom: 9px; }
details.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 1.25rem; color: var(--accent); transition: transform .25s cubic-bezier(.16,1,.3,1); flex: 0 0 auto; }
details.faq[open ] summary::after { transform: rotate(45deg); }
details.faq[open ] p { animation: viewIn .25s cubic-bezier(.16,1,.3,1) both; }
details.faq p { margin: 9px 0 2px; opacity: .88; }
.check-row { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 10px 0; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.dialect-links a.chip { text-decoration: none; }

/* ===== Higgsfield-inspired presentation (original Sawti design): ticker, drift rows, badges, skeletons ===== */
.ticker { direction: ltr; overflow: hidden; background: #0C2B1D; color: #DFF3E7; }
.ticker-track { display: flex; width: max-content; animation: tickMove 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker .tg { white-space: nowrap; padding: 7px 0; font-size: .84rem; font-weight: 700; }
@keyframes tickMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.voice-drift:hover @keyframes driftMove { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.nav-badge { background: #D64541; color: #fff; font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; margin-inline-start: 6px; }
.tab { position: relative; }
.tab-dot { position: absolute; top: 7px; inset-inline-end: calc(50% - 17px); width: 7px; height: 7px; border-radius: 50%; background: #D64541; }
.skel-card { height: 118px; border-radius: var(--r); background: #E6EAE3; animation: skelPulse 1.1s ease-in-out infinite alternate; }
@keyframes skelPulse { from { opacity: .5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track,   .skel-card { animation: none !important; }
}

/* persona portraits on voice cards */
.voice-card .avatar { position: relative; overflow: hidden; }
.voice-card .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* speaking portrait: the playing voice's photo subtly bobs with a sound ring */
.avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.voice-card.speaking .avatar-ring, .history-item.speaking .avatar-ring { animation: ringPulse 1.15s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
@keyframes ringPulse { from { transform: scale(.9); opacity: .85; } to { transform: scale(1.22); opacity: 0; } }
.voice-card.speaking .avatar img, .history-item.speaking .avatar img { animation: speakBob .8s ease-in-out infinite alternate; }
@keyframes speakBob { from { transform: scale(1.03); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .voice-card.speaking .avatar img, .history-item.speaking .avatar img { animation: none !important; }
  .voice-card.speaking .avatar-ring, .history-item.speaking .avatar-ring { animation: none !important; opacity: .6; transform: none !important; }
}

/* features batch: dictionary, drafts, effects */
.draft-hint { color: var(--accent); font-weight: 700; }
.fx-block { margin-top: 16px; }
.fx-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.fx-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 16px; font-weight: 700; cursor: pointer; transition: transform .15s cubic-bezier(0.16, 1, 0.3, 1), background .15s; }
.fx-chip:active { transform: scale(.96); }
.fx-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* director mode */
.director-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.director-label { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .86rem; }
.director-label svg { width: 16px; height: 16px; }
.dir-chip { border: 1px solid var(--line); background: #EFF4EC; border-radius: 999px; padding: 5px 12px; font-size: .8rem; font-weight: 700; cursor: pointer; transition: transform .15s cubic-bezier(0.16, 1, 0.3, 1), background .15s; }
.dir-chip:hover { background: #E2EDDC; }
.dir-chip:active { transform: scale(.95); }
.director-hint { margin: 0 0 8px; }
.dir-chip.auto { background: var(--accent); color: #fff; border-color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }
.dir-chip.auto svg { width: 14px; height: 14px; }
.dir-chip.auto:hover { background: var(--accent); filter: brightness(1.08); }

/* auto-director motion feedback */
.dir-chip.auto.working svg { animation: dirSpin .7s linear infinite; }
@keyframes dirSpin { to { transform: rotate(360deg); } }
.dir-chip.auto.done { background: var(--accent); }
#scriptText.directed-flash { animation: dirFlash .9s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes dirFlash { 0% { box-shadow: 0 0 0 0 rgba(12, 122, 75, .45); } 100% { box-shadow: 0 0 0 14px rgba(12, 122, 75, 0); } }
@media (prefers-reduced-motion: reduce) { .dir-chip.auto.working svg, #scriptText.directed-flash { animation: none !important; } }

/* ===== Motion pass: view entrances + director drop-in ===== */
.view.active { animation: viewIn .45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.view.active .card, .view.active .voice-card, .view.active .plan-card, .view.active .faq { animation: riseIn .5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.view.active .voice-card:nth-child(2), .view.active .plan-card:nth-child(2) { animation-delay: .05s; }
.view.active .voice-card:nth-child(3), .view.active .plan-card:nth-child(3) { animation-delay: .1s; }
.view.active .voice-card:nth-child(4), .view.active .plan-card:nth-child(4) { animation-delay: .15s; }
.view.active .voice-card:nth-child(5) { animation-delay: .2s; }
.view.active .voice-card:nth-child(6) { animation-delay: .25s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.director-bar { animation: dropIn .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes dropIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .view.active, .view.active .card, .view.active .voice-card, .view.active .plan-card, .view.active .faq, .director-bar { animation: none !important; }
}

/* ===== Motion pass 2: presses, hovers, modal, toast, spinner ===== */
.btn:active { transform: scale(.97); }
.chip:active, .tab:active { transform: scale(.95); }
.btn, .chip, .tab { transition: transform .15s cubic-bezier(0.16, 1, 0.3, 1), background .15s, color .15s; }
@media (hover: hover) and (pointer: fine) {
  .voice-card:hover, .plan-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(24, 42, 32, .12); }
  .history-item:hover { transform: translateX(-3px); }
  .voice-card, .plan-card, .history-item { transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s; }
}
.modal:not(.hidden) { animation: fadeIn .25s ease-out; }
.modal:not(.hidden) .modal-box { animation: modalPop .38s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.toast:not(.hidden) { animation: toastUp .32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes toastUp { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
#btnGenerate[disabled] svg { animation: dirSpin 1s linear infinite; }
.rail-link.active svg, .tab.active svg { animation: iconPop .35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes iconPop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
#promoBanner:not(.hidden) { animation: bannerDown .5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes bannerDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
.faq[open] p { animation: viewIn .3s cubic-bezier(0.16, 1, 0.3, 1); }
.faq summary:active { transform: scale(.99); }
#waFab:not(.hidden) { animation: iconPop .45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (prefers-reduced-motion: reduce) {
  .modal:not(.hidden), .modal:not(.hidden) .modal-box, .toast:not(.hidden), .rail-link.active svg, .tab.active svg,
  #promoBanner:not(.hidden), .faq[open] p, #waFab:not(.hidden), #btnGenerate[disabled] svg { animation: none !important; }
  .btn:active, .chip:active, .tab:active, .voice-card:hover, .plan-card:hover, .history-item:hover { transform: none !important; }
}

.history-item .avatar { width: 42px; height: 42px; font-size: 17px; }
.history-item .avatar-wrap { flex: none; }

/* ===== Wave player (no native audio strip) + speaking EQ bars ===== */
#resultAudio { display: none; }
.wave-controls { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.wave-play { width: 44px; height: 44px; flex: none; border: none; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), background .15s; }
.wave-play:active { transform: scale(.9); }
.wave-play svg { width: 20px; height: 20px; }
.wave-play.sm { width: 34px; height: 34px; }
.wave-play.sm svg { width: 16px; height: 16px; }
.wave-time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mini-wave { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 150px; }
.mini-canvas { flex: 1; width: 100%; height: 36px; cursor: pointer; }
.eq-bars { display: none; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 999px; padding: 3px 6px; gap: 2px; align-items: flex-end; height: 16px; box-shadow: 0 2px 8px rgba(24, 42, 32, .18); z-index: 2; }
.speaking .eq-bars { display: inline-flex; }
.eq-bars i { width: 3px; height: 10px; border-radius: 2px; background: var(--accent); transform-origin: bottom; animation: eqDance .7s ease-in-out infinite alternate; }
.eq-bars i:nth-child(2) { animation-delay: .12s; } .eq-bars i:nth-child(3) { animation-delay: .24s; } .eq-bars i:nth-child(4) { animation-delay: .06s; }
@keyframes eqDance { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .eq-bars i { animation: none !important; transform: scaleY(.7); } }

/* ===== Projects page ===== */
.proj-create { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.proj-create input { flex: 1; min-width: 180px; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.project-card { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #E3E8E0; border-radius: 14px; background: #FBFCFA; cursor: pointer; transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s; animation: riseIn .45s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.project-card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .project-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(24, 42, 32, .1); } }
.project-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #E7F2EA; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.project-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.project-meta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-meta span { font-size: 12px; color: var(--muted); }
.proj-voices-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.proj-voices-head h3 { margin: 0; }
.field-error { border-color: #C0392B !important; animation: shakeX .3s ease-in-out; }
@keyframes shakeX { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .project-card { animation: none !important; } .field-error { animation: none !important; } }

/* ===== History rows: round portraits + no sideways pull (fix 15:52) ===== */
.history-item .avatar { position: relative; overflow: hidden; }
.history-item .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.history-item, .mini-wave, .mini-canvas { min-width: 0; }
.history-item .regen-btn { flex: none; border: 1px solid #E3E8E0; border-radius: 10px; width: 36px; height: 36px; }

/* ===== Studio: collapsible script assistant ===== */
.agent-head { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: none; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; padding: 2px 0; }
.agent-head .agent-chev { margin-inline-start: auto; transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1); }
.agent-box.open .agent-chev { transform: rotate(180deg); }
.agent-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease-drawer), opacity .25s; }
.agent-box.open .agent-body { grid-template-rows: 1fr; opacity: 1; }
.agent-body > .agent-fields { overflow: hidden; min-height: 0; padding-top: 0; }
.agent-box.open .agent-fields { padding-top: 10px; }

/* ===== Best motion pass: shine, sheen, speaking glow ===== */
.wave-hero { position: relative; overflow: hidden; }
.wave-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%); transform: translateX(160%); animation: heroSheen 4.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; pointer-events: none; }
@keyframes heroSheen { 0% { transform: translateX(160%); } 30%, 100% { transform: translateX(-160%); } }
.btn-primary { position: relative; overflow: hidden; }
#btnGenerate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .35) 50%, transparent 58%); transform: translateX(160%); animation: heroSheen 3.4s cubic-bezier(0.16, 1, 0.3, 1) infinite; pointer-events: none; }
.speaking .avatar { box-shadow: 0 0 0 3px rgba(12, 122, 75, .22), 0 8px 20px rgba(12, 122, 75, .35); }
@media (prefers-reduced-motion: reduce) {
  .wave-hero::after, #btnGenerate::after { animation: none !important; display: none; }
  .agent-body, .agent-head .agent-chev { transition: none !important; }
}

/* ===== Skills pass: focus feedback + selection pops (60fps / micro-interactions) ===== */
:focus-visible { outline: 3px solid rgba(12, 122, 75, .45); outline-offset: 2px; border-radius: 8px; }
.chip.active { animation: popIn .25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.icon-btn { transition: transform .15s cubic-bezier(0.16, 1, 0.3, 1), background .15s; }
.icon-btn:active { transform: scale(.88); }
@media (prefers-reduced-motion: reduce) { .chip.active { animation: none !important; } .icon-btn:active { transform: none !important; } }

/* ===== Batch: dark mode, splash, minutes meter, card waves, samples, calculator ===== */
#splash { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .45s ease; }
#splash.done { opacity: 0; pointer-events: none; }
#splash .splash-name { font-family: var(--serif); font-size: 30px; font-weight: 900; }
.minutes-meter { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; margin-bottom: 12px; font-size: 13.5px; box-shadow: var(--shadow-sm); animation: dropIn .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mm-track { flex: 1; height: 8px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
#minutesFill { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #2BB673, #1E9E66); transition: width .8s cubic-bezier(0.16, 1, 0.3, 1); }
#btnGenerate.ready { animation: genPulse 1.6s ease-in-out infinite; }
#btnGenerate[disabled] { animation: none !important; }
@keyframes genPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.samples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 22px; }
.sample-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); animation: riseIn .45s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.sample-card span { font-size: 13px; color: var(--ink2); flex: 1; }
@media (prefers-reduced-motion: reduce) {
  #btnGenerate.ready { animation: none !important; }
  #minutesFill { transition: none !important; }
}

/* Splash: the logo itself moves like a wave */
#splash img.splash-logo { animation: logoWave 1.05s ease-in-out infinite; transform-origin: center; }
@keyframes logoWave { 0%, 100% { transform: translateY(0) scaleY(1); } 30% { transform: translateY(-7px) scaleY(1.07); } 55% { transform: translateY(2px) scaleY(.95); } 75% { transform: translateY(-3px) scaleY(1.03); } }
@media (prefers-reduced-motion: reduce) { #splash img.splash-logo { animation: none !important; } }

/* Auto-growing script box, compact start */
#scriptText { resize: none; min-height: 76px; overflow-y: auto; }
.agent-fields .filter-chips { padding-top: 2px; }

/* ===== Publish tools ===== */
.publish-wrap { flex-direction: column; align-items: stretch; width: 100%; }
.publish-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.video-panel { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.video-panel video { width: 100%; border-radius: 12px; background: #000; }
.video-status { font-size: 13px; color: var(--ink2); min-height: 18px; }

/* ===== Hot badge + compare bar ===== */
.hot-badge { display: inline-flex; vertical-align: -3px; color: #E86A17; animation: flick 1.1s ease-in-out infinite; }
.hot-badge svg { width: 16px; height: 16px; }
@keyframes flick { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.18) rotate(5deg); } }
.cmp-btn.on { background: var(--accent-soft); color: var(--accent-deep); }
.compare-bar { position: fixed; inset-inline: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 95; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; box-shadow: var(--shadow); animation: toastUp .35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (min-width: 1024px) { .compare-bar { bottom: 22px; max-width: 560px; margin-inline: auto; } }
.cmp-slot { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; }
.cmp-slot img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.cmp-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-plus { width: 36px; height: 36px; border-radius: 50%; border: 2px dashed var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink2); }
@media (prefers-reduced-motion: reduce) { .hot-badge, .compare-bar { animation: none !important; } }

/* Emil pass: toasts leave faster than they arrive */
.toast { transition: opacity .18s ease-in, transform .18s ease-in; }
.toast.bye { opacity: 0; transform: translateY(8px) scale(.97); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none !important; } }

/* ===== RESTRUCTURE — Emil motion system (frequency triage + tokens) ===== */
:root { --dur-1: 120ms; --dur-2: 200ms; --dur-3: 300ms; }
/* high-frequency surfaces (every view switch): fast + no cascade */
.view.active { animation: viewIn var(--dur-2) var(--ease-out); }
.view.active .card, .view.active .plan-card, .view.active .faq { animation: none; }
.view.active .voice-card { animation: riseIn var(--dur-3) var(--ease-out) backwards; }
.view.active .voice-card:nth-child(2) { animation-delay: .02s; }
.view.active .voice-card:nth-child(3) { animation-delay: .04s; }
.view.active .voice-card:nth-child(4) { animation-delay: .06s; }
.view.active .voice-card:nth-child(5) { animation-delay: .08s; }
.view.active .voice-card:nth-child(6) { animation-delay: .1s; }
.project-card { animation-duration: var(--dur-3); }
.wizard-step.active.fwd { animation-duration: .24s; }
.wizard-step.active.bwd { animation-duration: .24s; }
.director-bar, .minutes-meter { animation: dropIn var(--dur-3) var(--ease-out); }
.toast:not(.hidden) { animation: toastUp .28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.compare-bar { animation: toastUp .28s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* decorative loops: play a few times, then rest */
.wave-hero::after { animation-iteration-count: 3; }
#btnGenerate::after { animation-iteration-count: 3; }
/* constant work-screen pulse: off (color carries the state) */
.step.active .step-dot { animation: none; }

/* ===== DECLUTTER — icon-first nav, more air ===== */
.rail-link { font-size: 0; gap: 0; padding: 10px 13px; }
.rail-link svg { width: 21px; height: 21px; }
.rail-link .nav-badge { font-size: 10px; }
.tab span:not(.tab-dot) { display: none; }
.tab { padding-top: 13px; padding-bottom: calc(13px + env(safe-area-inset-bottom)); }
.tab svg { width: 23px; height: 23px; }
.page { padding-top: 46px; }
.section-head { margin-bottom: 36px; }
.view .card { margin-bottom: 26px; }
.voice-card { padding: 18px; }
.plan-feats { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 20px; padding: 0; list-style: none; }
.plan-feats li { font-size: 15px; font-weight: 600; }
#btnMoreFilters { margin-bottom: 10px; }
.result-actions .btn, .publish-tools .btn { padding: 11px 15px; }
.how-card { padding: 30px 20px; }
.fact span { font-size: 15px; }

/* WhatsApp FAB: icon-only circle */
.wa-fab { width: 54px; height: 54px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.wa-fab svg { width: 26px; height: 26px; }

/* ===== Home (landing): hero, features, voices strip, reveals ===== */
.home-hero { text-align: center; padding: 10px 0 26px; }
.home-logo { width: 92px; height: 92px; animation: homeLogoFloat 5.2s ease-in-out infinite alternate; }
@keyframes homeLogoFloat { from { transform: translateY(0) rotate(-1.6deg); } to { transform: translateY(-7px) rotate(1.6deg); } }
.home-hero h1 { font-family: var(--serif); font-size: clamp(30px, 6.4vw, 50px); line-height: 1.25; margin: 14px 0 4px; }
.home-hero .wave-hero { max-width: 520px; margin-left: auto; margin-right: auto; }
.home-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.home-stats { display: flex; gap: 34px; justify-content: center; margin-top: 24px; }
.home-stats .st { min-width: 0; }
.home-stats .st b { display: block; font-family: var(--serif); font-size: 32px; color: var(--accent-deep); }
.home-stats .st span { font-size: 13px; color: var(--muted); font-weight: 700; }
#viewHome .section-head { margin-top: 40px; }
.rv { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feat-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 10px; border-radius: 18px; background: #fff; border: 1px solid var(--line); font: inherit; font-weight: 800; font-size: 15.5px; color: inherit; cursor: pointer; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.feat-card svg { width: 27px; height: 27px; color: var(--accent); }
.feat-card:active { transform: scale(.97); }
@media (hover: hover) { .feat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(12, 60, 38, .10); } }
.home-voices { display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x proximity; scrollbar-width: none; }
.home-voices::-webkit-scrollbar { display: none; }
.hv { scroll-snap-align: start; background: none; border: 0; font: inherit; text-align: center; min-width: 78px; cursor: pointer; padding: 0; }
.hv img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-soft); transition: transform .18s var(--ease-out); }
.hv:active img { transform: scale(.94); }
.hv span { display: block; font-size: 12.5px; font-weight: 700; margin-top: 6px; }
#homePlans { scroll-margin-top: 92px; }
.home-final { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 46px 0 8px; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .home-logo { animation: none; }
}

/* ===== ثيم غامق + رئيسية بأسلوب ثمانية ===== */
:root{
  --bg:#0C0E0D; --surface:#141716; --surface2:#1A1D1B;
  --ink:#F2F4F1; --ink2:#B9C2BC; --line:rgba(255,255,255,.075);
  --accent:#22B573; --accent-deep:#63DFA8; --accent-soft:rgba(34,181,115,.13);
  --gold:#D9A83E; --gold-soft:rgba(217,168,62,.13);
  --shadow:0 18px 44px rgba(0,0,0,.38); --shadow-sm:0 6px 20px rgba(0,0,0,.26);
}
body{ background:var(--bg); }
.topbar{ background:rgba(11,13,12,.9); }
.btn{ border-radius:999px; }
.btn-outline{ background:var(--surface2); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--surface2); }
.btn-dark{ background:var(--surface3); color:#fff; }
.btn-dark:hover{ background:#2B302C; }
#btnLogin{ background:var(--surface3); color:#fff; }
.tabbar{ background:rgba(10,11,13,.92); left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); border:1px solid var(--line); border-radius:999px; padding-bottom:0; box-shadow:0 14px 34px rgba(0,0,0,.5); }
.tab{ border-radius:999px; margin:5px 3px; }
.tab.active{ background:#26292F; color:#fff; }
@media (max-width:1023px){ .container.page{ padding-bottom:118px; } }
.chip{ background:var(--surface2); border-color:var(--line); color:var(--ink); }
.chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.mtab.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.toast{ background:#F2F4F1; color:#10130F; }
.card input[type=text], .card input[type=email], .card input[type=password], .card select, .auth-form input, textarea, .proj-create input, select{ background:var(--field); }
.wizard-nav{ background:rgba(10,11,13,.95); }
.mobile-gen-bar{ background:rgba(10,11,13,.92); }
.compare-bar{ background:rgba(10,11,13,.94); }
.eq-bars{ background:var(--surface3); }
.wave-play{ background:var(--accent); }
.skel-card{ background:var(--surface2); }
#splash{ background:var(--bg); }
.splash-name{ color:var(--ink); }
::-webkit-scrollbar-thumb{ background:#33373E; border-color:var(--bg); }
.hero-carousel{ position:relative; border-radius:22px; overflow:hidden; min-height:330px; background:var(--field); }
.hero-slide{ position:absolute; inset:0; padding:26px 22px 30px; display:flex; flex-direction:column; justify-content:flex-end; gap:9px; opacity:0; transform:scale(1.025); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); pointer-events:none; }
.hero-slide.active{ opacity:1; transform:none; pointer-events:auto; }
.hero-slide.hs1{ background:linear-gradient(155deg,#0D4A2D,#07130D 72%); }
.hero-slide.hs2{ background:linear-gradient(155deg,#0B3049,#05080C 72%); }
.hero-slide.hs3{ background:linear-gradient(155deg,#4A3607,#0D0A03 72%); }
.hero-kicker{ display:inline-flex; gap:7px; align-items:center; background:rgba(255,255,255,.12); padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:800; width:max-content; max-width:100%; }
.hero-kicker svg{ width:15px; height:15px; }
.hero-title{ font-family:var(--serif); font-size:clamp(30px,7.4vw,46px); line-height:1.35; }
.hero-meta{ color:rgba(255,255,255,.72); font-weight:700; }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.hero-dots{ position:absolute; top:16px; inset-inline-end:18px; display:flex; gap:6px; z-index:3; }
.hdot{ width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.35); border:0; padding:0; cursor:pointer; transition:width .3s var(--ease-out), background .3s; }
.hdot.active{ width:22px; background:#fff; }
.trow{ margin-top:36px; }
.trow-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.trow-head h2{ font-size:21px; font-weight:900; }
.trow-head.center{ justify-content:center; }
.trow-more{ background:none; border:0; color:var(--accent-deep); font:inherit; font-weight:800; display:inline-flex; gap:2px; align-items:center; cursor:pointer; }
.trow-more svg{ width:17px; height:17px; }
/* ===== أفلام الرئيسية: مروحة هلاي (بطاقة وسطى كبيرة + جانبيتان، تدور وحدها) ===== */
.fan{ position:relative; max-width:880px; margin-inline:auto; height:min(76vw,448px); }
.fan .film-card{ position:absolute; top:0; left:50%; width:min(38vw,232px); border-radius:24px; overflow:hidden; border:2px solid rgba(95,211,165,.26); box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 30px rgba(34,181,115,.16); background:var(--bg-deep); cursor:pointer; transition:transform 1.4s cubic-bezier(0.32,0.72,0,1), opacity 1.4s, border-color 1.4s, box-shadow 1.4s; }
.fan .film-card::after{ content:''; position:absolute; inset:0; background:#000; opacity:0; transition:opacity 1.4s; pointer-events:none; }
.fan .film-card video{ width:100%; aspect-ratio:9/16; object-fit:cover; display:block; }
.fan .pos-c{ transform:translateX(-50%) scale(1); z-index:3; border-color:rgba(95,211,165,.55); box-shadow:0 34px 80px rgba(0,0,0,.6), 0 0 48px rgba(34,181,115,.2); }
.fan .pos-l{ transform:translateX(-122%) translateY(7%) scale(.88); z-index:2; }
.fan .pos-r{ transform:translateX(22%) translateY(7%) scale(.88); z-index:2; }
.fan .pos-l::after, .fan .pos-r::after{ opacity:.30; }
.fan .pos-hide{ transform:translateX(-50%) translateY(10%) scale(.6); z-index:1; opacity:0; pointer-events:none; }
.film-chip{ position:absolute; bottom:12px; inset-inline-end:12px; z-index:2; background:rgba(5,8,6,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#F2F4F1; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:800; pointer-events:none; }
.fan-badge{ text-align:center; margin-top:28px; }
.fan-badge span{ display:inline-block; border:2px solid rgba(255,255,255,.7); border-radius:18px; padding:7px 26px 10px; font-size:19px; font-weight:900; }
.fan-title{ text-align:center; font-size:clamp(30px,8.4vw,46px); font-weight:900; line-height:1.28; margin:18px 0 0; }
.fan-title span{ color:var(--muted); }
.fan-sub{ text-align:center; color:var(--muted,var(--ink2)); font-size:16.5px; margin:12px auto 0; max-width:34em; }
.fan-cta{ display:flex; justify-content:center; width:min(100%,560px); margin:22px auto 0; }
/* ===== توهّج أخضر ناعم وراء المروحة (نمط قسم التسويق عند هلاي) ===== */
#homeFilms{ position:relative; }
#homeFilms::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(rgba(95,211,165,.30) 1.2px, transparent 1.4px) 0 0 / 26px 26px repeat,
    radial-gradient(ellipse 80% 32% at 50% 4%, rgba(34,181,115,.2), rgba(34,181,115,.07) 46%, transparent 72%) 0 0 / 100% 100% no-repeat,
    radial-gradient(ellipse 80% 32% at 50% 97%, rgba(34,181,115,.18), rgba(34,181,115,.06) 46%, transparent 72%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, #0A0C0B, var(--bg) 38%, var(--bg) 62%, #0A0C0B) 0 0 / 100% 100% no-repeat;
  animation:glowBreath 9s ease-in-out infinite alternate; }
@keyframes glowBreath{ from{ opacity:.82; transform:translateX(-50%) scale(1); } to{ opacity:1; transform:translateX(-50%) scale(1.06); } }
@media (prefers-reduced-motion: reduce){ #homeFilms::before{ animation:none; } }
#homeFilms > *{ position:relative; }
/* ===== فتح بطاقة اللهجة: تبقى في بلاصتها، والشاشة وراها تتبالّر ===== */
body.locked{ overflow:hidden; }
.dialect-blur{ position:fixed; inset:0; z-index:130; background:rgba(3,4,5,.45); -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15); opacity:0; pointer-events:none; transition:opacity .35s ease; }
.dialect-blur.show{ opacity:1; pointer-events:auto; }
.dfan.has-open{ z-index:140; }
/* ===== مروحة اللهجات: 5 بطاقات متراكبة، الوسطى كبيرة، تدور، والوسطى تنفتح ===== */
.dfan{ position:relative; max-width:920px; margin-inline:auto; height:min(80vw,398px); transition:height .55s cubic-bezier(0.32,0.72,0,1); }

.dfan::before{ content:''; position:absolute; inset:0; z-index:0; background-image:url('/films/bg-wall2.webp'); background-size:640px 853px; background-position:50% 38%; background-repeat:repeat; opacity:.5; -webkit-mask-image:linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); pointer-events:none; animation:wallBreath 26s ease-in-out infinite alternate; transition:opacity .5s; }
@keyframes wallBreath{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.dfan::after{ content:''; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse 68% 60% at 50% 46%, rgba(5,6,7,.52), transparent 68%); pointer-events:none; }
.dfan.has-open::before, .dfan.has-open::after{ opacity:0; }
@media (prefers-reduced-motion: reduce){ .dfan::before{ animation:none; } }
.dfan .dcard{ position:absolute; top:0; left:50%; width:min(54vw,272px); flex:none; transition:transform 1.2s cubic-bezier(0.32,0.72,0,1), opacity 1.2s; }
.dfan .dcard::after{ content:''; position:absolute; inset:0; background:#000; opacity:0; transition:opacity 1.2s; pointer-events:none; }
.dfan .pos-c{ transform:translateX(-50%); z-index:5; }
.dfan .pos-l{ transform:translateX(-120%) translateY(6%) scale(.86); z-index:4; }
.dfan .pos-r{ transform:translateX(20%) translateY(6%) scale(.86); z-index:4; }
.dfan .pos-fl{ transform:translateX(-168%) translateY(12%) scale(.72); z-index:3; }
.dfan .pos-fr{ transform:translateX(68%) translateY(12%) scale(.72); z-index:3; }
.dfan .pos-l::after, .dfan .pos-r::after{ opacity:.22; }
.dfan .pos-fl::after, .dfan .pos-fr::after{ opacity:.42; }
.dfan .dcard.open{ z-index:6; }
.dfan .dcard.open::after{ opacity:0; }
.dfan.has-open .dcard:not(.open){ opacity:.16; }
/* ===== جدار المعلقين: خلفية شبكة صور الأصوات خلف الأصوات والعيّنات (نمط هلاي) ===== */
@keyframes wallRise{ from{ background-position:50% 0; } to{ background-position:50% -933px; } }
@media (prefers-reduced-motion: reduce){ .dfan::before{ z-index:0; animation:none; } }
.hscroll{ display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity; scrollbar-width:none; }
.hscroll::-webkit-scrollbar{ display:none; }
.vcard{ scroll-snap-align:start; flex:0 0 128px; background:none; border:0; font:inherit; color:inherit; text-align:start; cursor:pointer; padding:0; min-width:0; }
.vcard-img{ display:block; width:128px; height:128px; border-radius:16px; overflow:hidden; background:var(--surface2); }
.vcard-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.vcard b{ display:block; margin-top:8px; font-size:15px; }
.vcard-meta{ display:block; color:var(--ink2); font-size:11.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scard{ scroll-snap-align:start; flex:0 0 228px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.scard-art{ height:102px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; }
.scard-art svg{ width:38px; height:38px; }
.scard-art.a1{ background:linear-gradient(140deg,#0E9F5D,#075C34); }
.scard-art.a2{ background:linear-gradient(140deg,#B45309,#7C2D12); }
.scard-art.a3{ background:linear-gradient(140deg,#BE4242,#7F1D1D); }
.scard-art.a4{ background:linear-gradient(140deg,#2C6FBF,#1E3A8A); }
.scard b{ font-size:15.5px; }
.scard .btn{ align-self:flex-start; }
.dcard{ scroll-snap-align:start; flex:0 0 min(68vw, 272px); align-self:flex-start; border:1px solid var(--line); border-radius:18px; overflow:hidden; cursor:pointer; min-width:0; background:var(--dv,#0D0F11); transition:box-shadow .4s ease; -webkit-tap-highlight-color:transparent; }
.dcard-pic{ aspect-ratio:3/4; overflow:hidden; }
.dcard-pic img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(0.16,1,0.3,1); }
.dcard.active{ box-shadow:0 0 0 2px var(--accent), 0 18px 40px rgba(0,0,0,.5); }
.dcard.active .dcard-pic img{ transform:scale(1.045); }
.dcard-open{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .62s cubic-bezier(0.32,0.72,0,1); }
.dcard.open .dcard-open{ grid-template-rows:1fr; }
.dcard-clip{ overflow:hidden; min-height:0; }
.dcard-voices{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; padding:12px; background:var(--dv,#0D0F11); }
.dcard .vtile{ animation:none; }
.dcard.open .vtile{ animation:rowIn .55s cubic-bezier(0.16,1,0.3,1) both; animation-delay:calc(var(--i,0)*55ms + 140ms); }
.vtile{ position:relative; border:0; padding:0; border-radius:16px; overflow:hidden; aspect-ratio:3/4; cursor:pointer; background:var(--surface2); font:inherit; text-align:start; animation:rowIn .55s cubic-bezier(0.16,1,0.3,1) both; animation-delay:calc(var(--i,0)*55ms + 150ms); transition:transform .25s cubic-bezier(0.16,1,0.3,1); }
.vtile:active{ transform:scale(.97); }
.vtile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.vtile-shade{ position:absolute; inset:0; background:linear-gradient(to top, rgba(5,6,7,.85) 0%, rgba(5,6,7,.05) 52%, rgba(5,6,7,.12) 100%); }
.vtile-info{ position:absolute; bottom:10px; inset-inline:12px; color:#fff; display:flex; flex-direction:column; gap:1px; }
.vtile-info b{ font-size:17px; font-weight:900; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.vtile-info small{ font-size:12px; font-weight:700; opacity:.85; }
.vtile-play{ position:absolute; top:10px; inset-inline-end:10px; width:38px; height:38px; border-radius:50%; border:0; background:rgba(5,6,7,.55); backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.vtile-play svg{ width:18px; height:18px; }
.vtile-play.playing{ background:var(--accent); color:#04150B; }
.vtile.playing{ box-shadow:0 0 0 2px var(--accent); }
.vtile-premium{ position:absolute; top:10px; inset-inline-start:10px; background:rgba(217,168,62,.92); color:#241A02; font-size:11px; font-weight:900; border-radius:99px; padding:3px 9px; display:inline-flex; align-items:center; gap:4px; }
.vtile-premium svg{ width:12px; height:12px; }
@keyframes rowIn{ from{ opacity:0; transform:translateY(18px) scale(.97); } }
@media (prefers-reduced-motion: reduce){ .dcard-open, .dcard, .dcard-pic img, .vtile{ transition:none !important; animation:none !important; } }
.feat-stack{ display:flex; flex-direction:column; gap:12px; }
.feat-row{ display:flex; align-items:center; gap:14px; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px 16px; font:inherit; color:inherit; text-align:start; cursor:pointer; transition:transform .18s var(--ease-out); }
.feat-row:active{ transform:scale(.985); }
.feat-ic{ flex:none; width:48px; height:48px; border-radius:14px; background:var(--accent-soft); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; }
.feat-ic svg{ width:24px; height:24px; }
.feat-tx{ flex:1; min-width:0; }
.feat-tx b{ display:block; font-size:16.5px; }
.feat-tx span{ color:var(--ink2); font-size:13.5px; font-weight:600; }
.feat-row > svg{ color:var(--ink2); flex:none; }
.plan-toggle{ display:flex; gap:6px; background:var(--surface2); border:1px solid var(--line); border-radius:999px; padding:5px; width:max-content; max-width:100%; margin:0 auto 18px; }
.ptog{ border:0; background:transparent; color:var(--ink2); font:inherit; font-weight:800; padding:8px 24px; border-radius:999px; cursor:pointer; }
.ptog.active{ background:#F2F4F1; color:#10130F; }
#planGrid{ display:flex; flex-direction:column; gap:14px; }
.plan-card{ border-radius:20px; }
.plan-card.hot{ border-color:rgba(217,168,62,.55); }
.plan-card.hot .btn{ background:var(--gold); color:#1A1405; }
@media (prefers-reduced-motion: reduce){ .hero-slide{ transition:none; } }

/* ===== فروق ثمانية: هيرو بطيء + أسهم صفوف + باقات بصف واحد ===== */
.btn-white{ background:#fff; color:#10130F; }
.btn-white:hover{ background:#E8ECEA; }
.hero-dots{ top:auto; bottom:14px; inset-inline:0; justify-content:center; }
.hero-slide{ padding-bottom:46px; background:transparent; }
.hero-slide::before{ content:""; position:absolute; inset:0; z-index:0; }
.hero-slide.hs1{ background:transparent; } .hero-slide.hs1::before{ background:linear-gradient(155deg,#0D4A2D,#07130D 72%); }
.hero-slide.hs2{ background:transparent; } .hero-slide.hs2::before{ background:linear-gradient(155deg,#0B3049,#05080C 72%); }
.hero-slide.hs3{ background:transparent; } .hero-slide.hs3::before{ background:linear-gradient(155deg,#4A3607,#0D0A03 72%); }
.hero-slide > *{ position:relative; z-index:1; }
.hero-slide.active::before{ animation:kb 13s ease-out forwards; }
@keyframes kb{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
.scard{ background:transparent; border:0; padding:0; }
.scard-art{ border-radius:12px; height:118px; }
.row-nav{ display:none; gap:8px; }
@media (min-width:768px){ .row-nav{ display:flex; } }
.rnav{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface2); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity .2s, transform .15s var(--ease-out); }
.rnav:active{ transform:scale(.94); }
.rnav:disabled{ opacity:.32; cursor:default; }
.rnav svg{ width:18px; height:18px; }
@media (hover:hover){ .vcard-img img{ transition:transform .45s var(--ease-out); } .vcard:hover .vcard-img img{ transform:scale(1.06); } .scard-art svg{ transition:transform .45s var(--ease-out); } .scard:hover .scard-art svg{ transform:scale(1.1); } }
.plan-card.hot{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 14px 34px rgba(34,181,115,.14); }
.plan-card.hot .btn{ background:var(--accent); color:#fff; }
.plan-card.gold .btn{ background:var(--gold); color:#1A1405; }
@media (min-width:900px){
  #planGrid{ flex-direction:row; align-items:stretch; }
  #planGrid .plan-card{ flex:1 1 0; }
  #planGrid .plan-card:only-child{ flex:0 1 480px; margin-inline:auto; }
}
@media (prefers-reduced-motion: reduce){ .hero-slide.active::before{ animation:none; } }

/* ===== إصلاح ألوان الغامق: خلفيات فاتحة متبقية ===== */
:root{ --ok:#4ADE80; --ok-soft:rgba(74,222,128,.14); --danger:#F87171; --danger-soft:rgba(248,113,113,.13); }
.result-box{ background:#0D1512; border-color:rgba(74,222,128,.4); }
.voice-card.selected{ background:rgba(34,181,115,.1); }
.voice-list .voice-card:hover{ background:var(--surface2); }
.project-card{ background:var(--surface); border-color:var(--line); }
.project-ic{ background:rgba(34,181,115,.15); color:var(--accent-deep); }
.dir-chip{ background:var(--surface2); color:var(--ink); }
.dir-chip:hover{ background:var(--surface3); }
.feat-card{ background:var(--surface); }
.tag.dialect{ background:rgba(217,168,62,.16); color:#EBCB7A; }
.tag.d-oranian{ background:rgba(34,181,115,.16); color:#4ADE9E; }
.tag.d-setifian{ background:rgba(217,119,6,.18); color:#F2B25C; }
.tag.d-annabi{ background:rgba(224,82,82,.15); color:#F28B82; }
.tag.d-saharan{ background:rgba(202,169,60,.16); color:#E3CE7E; }
.tag.designed{ background:rgba(148,163,150,.16); color:#B9C6BA; }
.tag.premium{ background:rgba(217,168,62,.16); color:#EBCB7A; border-color:rgba(217,168,62,.5); }
.avatar.female{ background:#463026; }
.avatar.male{ background:#223F2B; }
.avatar.custom{ background:#3E3823; }
.status.proof_uploaded{ background:rgba(96,140,230,.15); color:#9DB9F2; }
.sticker-wrap{ display:flex; justify-content:center; padding:2px 0 18px; }
.sticker-img{ width:min(700px,94vw); max-width:100%; height:auto; display:block; }
.sticker-wrap.rv{ opacity:0; transform:translateY(16px) scale(.9); transition:opacity .45s var(--ease-out), transform .65s cubic-bezier(.34,1.45,.64,1); }
.sticker-wrap.rv.in{ opacity:1; transform:none; }
.sticker-img{ filter:drop-shadow(0 8px 22px rgba(34,181,115,.28)); animation:stickerFloat 3s ease-in-out .8s infinite alternate; }
@keyframes stickerFloat{ from{ transform:translateY(0); } to{ transform:translateY(-5px); } }
@media (prefers-reduced-motion: reduce){
  .sticker-img{ animation:none; }
  .sticker-wrap.rv{ opacity:1; transform:none; transition:none; }
}
.hero-slide.hs1::before{ background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.66)), url('/hero/h1.webp') 62% 50%/cover; }
.hero-slide.hs3::before{ background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.66)), url('/hero/h3.webp') 62% 50%/cover; }
.scard-art.a1{ background:url('/samples/shoes.webp') 0% 50%/cover; }
.scard-art.a2{ background:url('/samples/barber.webp') 0% 50%/cover; }
.scard-art.a3{ background:url('/samples/food-v2.webp') 0% 50%/cover; }
.scard-art.a1 svg, .scard-art.a2 svg, .scard-art.a3 svg{ display:none; }
.hero-slide.hs1, .hero-slide.hs3{ align-items:flex-end; text-align:left; }
.scard-art.a4{ background:url('/samples/clinic.webp') 0% 50%/cover; }
.scard-art.a4 svg{ display:none; }
.scard-art{ position:relative; overflow:hidden; }
.scard-wave{ position:absolute; left:0; right:0; bottom:0; width:100%; height:46px; display:block; background:linear-gradient(180deg, transparent, rgba(3,10,6,.55)); cursor:pointer; }
.scard-play{ position:absolute; inset-inline-end:10px; bottom:54px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(10,14,12,.55); backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:transform .15s var(--ease-out), background .2s; touch-action:manipulation; }
.scard-play:active{ transform:scale(.92); }
.scard-play svg{ width:19px; height:19px; display:block !important; }
.scard.playing .scard-art{ animation:scardPulse 1.6s ease-in-out infinite; }
@keyframes scardPulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.14); } }
@media (prefers-reduced-motion: reduce){ .scard.playing .scard-art{ animation:none; } }

.hero-slide.hs2::before{ background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.66)), url('/hero/h2v2.webp') 62% 50%/cover; }
.hero-slide.hs2{ align-items:flex-end; text-align:left; }

/* ===== مراجعة شاملة 23:40: تباين وألوان موحّدة وحركة أنظف ===== */
.alert.ok{ color:var(--ok); }
.result-head{ color:var(--ok); }
textarea#scriptText.invalid{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(248,113,113,.18); }
.field-error{ border-color:var(--danger) !important; }
.project-meta span{ color:var(--muted); }
.history-item .regen-btn{ border-color:var(--line); }
.toast{ transition:opacity .18s var(--ease-out), transform .18s var(--ease-out); }
@keyframes popIn{ from{ transform:scale(.55); opacity:0; } to{ transform:scale(1); opacity:1; } }
.agent-head .agent-chev{ transition-duration:.25s; }
::selection{ background:rgba(34,181,115,.4); color:#F2F4F1; }
:focus-visible{ outline:3px solid rgba(34,181,115,.55); outline-offset:2px; }
::-webkit-scrollbar-thumb{ background:#2E3338; }
::-webkit-scrollbar-thumb:hover{ background:#3A4046; }
@media (hover:none){ .voice-card:hover{ transform:none; } }
@media (max-width:700px){ .hero-slide.hs2::before{ background-position:78% 50%; } }

/* ===== حل تداخل خط الهيرو مع الصورة: ستارة تدرّج تحت النص ===== */
.hero-slide::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(90deg, rgba(3,15,9,.78) 0%, rgba(3,15,9,.52) 46%, rgba(3,15,9,0) 72%), linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 42%); }
.hero-title{ text-shadow:0 2px 22px rgba(0,0,0,.5); }
.hero-meta{ text-shadow:0 1px 12px rgba(0,0,0,.55); }
@media (max-width:700px){ .hero-title{ max-width:80%; } .hero-meta{ max-width:82%; } }

/* ===== موجة كبيرة بعد اللهجات + استوديو أنظف ===== */
.vsec{ position:relative; text-align:center; padding:24px 8px 22px; overflow:hidden; }
.vsec::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 95% 52% at 50% 47%, var(--vglow, rgba(20,184,166,.34)), transparent 76%); pointer-events:none; }
.vsec > *{ position:relative; }
.vsec-logo{ width:32px; height:32px; display:block; margin-inline:auto; }
.vsec-word{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:8px; }
.vsec-word .serif{ font-size:62px; font-weight:900; line-height:1.1; }
.vbars{ display:flex; align-items:center; gap:4px; transform:scale(.58); }
.vbars i{ display:block; width:5px; border-radius:3px; background:rgba(245,247,246,.55); }
.vbars i.g{ background:var(--accent-bright); }
.vsec-h{ font-size:29px; font-weight:900; line-height:1.4; margin:18px 0 2px; }
.vsec-h span{ color:var(--muted); }
.vsec-wave{ position:relative; margin-top:6px; padding-inline-start:68px; }
#bigWaveCanvas{ width:100%; height:118px; display:block; cursor:pointer; }
.vsec-play{ position:absolute; top:50%; inset-inline-start:0; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(16,20,18,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .18s var(--ease-out); z-index:2; }
.vsec-play svg{ width:22px; height:22px; }
.vsec-play:active{ transform:translateY(-50%) scale(.94); }
.vsec-line{ color:rgba(245,247,246,.78); font-weight:700; font-size:14.5px; line-height:1.95; margin:12px 8px 0; min-height:56px; }
.vsec-chips{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:16px; }
.vchip{ display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.045); border:1.5px solid rgba(255,255,255,.10); color:var(--ink); border-radius:15px; padding:8px 14px 8px 10px; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; transition:border-color .25s, background .25s, transform .15s; }
.vchip:active{ transform:scale(.97); }
.vchip.sel{ border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.08); }
.orb{ width:30px; height:30px; border-radius:50%; flex:none; box-shadow:inset -6px -8px 14px rgba(0,0,0,.35), inset 4px 6px 10px rgba(255,255,255,.35); }
.o-teal{ background:radial-gradient(circle at 32% 30%, #9FF5E2, #2DD4BF 45%, #0E7C6B); }
.o-blue{ background:radial-gradient(circle at 32% 30%, #CFE6FF, #60A5FA 45%, #1D4ED8); }
.o-pink{ background:radial-gradient(circle at 32% 30%, #FFD3EC, #F472B6 45%, #BE185D); }
.o-amber{ background:radial-gradient(circle at 32% 30%, #FFE9BE, #F5B04C 45%, #B45309); }
.o-violet{ background:radial-gradient(circle at 32% 30%, #E4D9FF, #A78BFA 45%, #6D28D9); }
.vsec-sub{ color:var(--muted); font-weight:700; font-size:14px; margin-top:16px; }
.vsec-cta{ display:inline-flex; width:auto; margin-top:14px; padding-inline:46px; border-radius:999px; }
@media (max-width:640px){ .step-label{ display:none; } }

/* ===== استوديو شاشة واحدة (نموذج هلاي، هوية صوتي) ===== */
.voice-head{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--surface2); margin-bottom:14px; }
.voice-head img{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; background:#223F2B; }
.vh-info{ flex:1; min-width:0; }
.vh-name{ font-weight:900; font-size:17px; }
.vh-meta{ color:var(--ink2); font-size:12.5px; font-weight:700; margin-top:2px; }
.vh-play{ flex:none; }
#btnChangeVoice{ flex:none; }
#btnChangeVoice .agent-chev{ transition:transform .25s var(--ease-out); }
#composerCard.panel-open #btnChangeVoice .agent-chev{ transform:rotate(180deg); }
.voice-panel{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .45s var(--ease-drawer), opacity .25s; }
.voice-panel.open{ grid-template-rows:1fr; opacity:1; }
.voice-panel-clip{ overflow:hidden; min-height:0; }
.voice-panel .voice-grid{ max-height:400px; overflow:auto; margin-bottom:14px; }
.voice-panel .filter-chips{ margin-bottom:12px; }
.expr-row{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:10px 0 2px; }
.expr-row .dir-chip.auto{ margin-inline-start:auto; }
.adv-fields{ flex-direction:column; align-items:stretch; gap:12px; }
.adv-fields .filter-chips{ margin-bottom:0; }
.gen-row{ margin-top:16px; }
.gen-cost{ font-size:13px; font-weight:800; opacity:.85; }

/* ===== استوديو أقصر: أصوات مضغوطة وموجة نتيجة كبيرة ===== */
.voice-head img{ width:44px; height:44px; }
.voice-panel .voice-grid{ max-height:320px; grid-template-columns:repeat(auto-fill,minmax(min(158px,100%),1fr)); gap:8px; }
.voice-panel .voice-card{ padding:9px 10px; }
.voice-panel .voice-tags{ display:none; }
.wave-canvas{ height:150px; background:rgba(245,247,246,.04); }
.api-hint{ color:var(--muted); font-size:13.5px; font-weight:600; line-height:1.8; margin:0; }
.api-row{ display:flex; gap:8px; align-items:center; }
.api-row input{ flex:1; min-width:0; direction:ltr; text-align:left; }
.api-keys{ display:flex; flex-direction:column; gap:8px; }
.api-key-row{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:9px 12px; font-size:13.5px; font-weight:700; }
.api-key-row .grow{ flex:1; min-width:0; }
.api-key-row small{ display:block; color:var(--muted); font-weight:600; }

/* ——— MCP home section ——— */
.mcpsec{ max-width:1060px; margin:56px auto 0; padding:0 18px; }
.mcp-card{ position:relative; display:grid; grid-template-columns:1fr 1.15fr; gap:30px; align-items:center; background:linear-gradient(160deg,#111511 0%,#101211 55%); border:1px solid rgba(95,211,165,.22); border-radius:30px; padding:34px; overflow:hidden; box-shadow:0 0 90px rgba(34,181,115,.08); text-align:start; }
.mcp-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(rgba(95,211,165,.13) 1.2px, transparent 1.4px); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 70% 65% at 85% 0%, #000 15%, transparent 70%); mask-image:radial-gradient(ellipse 70% 65% at 85% 0%, #000 15%, transparent 70%); pointer-events:none; }
.mcp-card::after{ content:''; position:absolute; inset:auto -15% -60% -15%; height:75%; background:radial-gradient(ellipse 55% 100% at 50% 100%, rgba(34,181,115,.16), transparent 70%); pointer-events:none; }
.mcp-card > *{ position:relative; z-index:1; }
.mcp-badge{ display:inline-flex; align-items:center; gap:7px; background:rgba(34,181,115,.13); color:var(--accent-bright); border:1px solid rgba(95,211,165,.24); font-weight:800; font-size:13.5px; border-radius:999px; padding:5px 15px; }
.mcp-txt h2{ font-size:clamp(26px,4.4vw,38px); font-weight:900; line-height:1.4; margin:14px 0 6px; }
.mcp-txt h2 span{ color:var(--accent-bright); }
.mcp-txt p{ color:var(--ink2); font-weight:600; margin:0 0 16px; max-width:420px; }
.mcp-agents{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.mcp-ag{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 15px 6px 8px; font-weight:800; font-size:14px; }
.mcp-ag img{ width:24px; height:24px; border-radius:7px; object-fit:cover; }
.mcp-ag img.gpt{ object-fit:contain; background:#17191C; padding:3px; }
.mcp-ag.txt{ padding:6px 15px; color:#C9D2CC; direction:ltr; }
.mcp-ticks{ display:flex; flex-direction:column; gap:5px; margin-bottom:20px; }
.mcp-ticks span{ color:#C9D2CC; font-weight:700; font-size:14.5px; }
.mcp-ticks span::before{ content:'✓'; color:var(--accent-bright); font-weight:900; margin-inline-end:8px; }
.mcp-frame{ border-radius:20px; overflow:hidden; border:1px solid rgba(95,211,165,.24); box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 60px rgba(34,181,115,.14); background:var(--bg-deep); }
.mcp-bar{ display:flex; align-items:center; gap:7px; padding:11px 16px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07); }
.mcp-bar i{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.18); }
.mcp-bar i:first-child{ background:rgba(95,211,165,.75); }
.mcp-bar span{ margin-inline-start:auto; direction:ltr; font-size:12.5px; color:#8A918A; font-weight:700; background:rgba(255,255,255,.05); border-radius:999px; padding:3px 13px; }
.mcp-frame video{ width:100%; display:block; }
.mcp-banner-home{ display:block; width:min(92vw,680px); max-width:100%; margin:0 auto 22px; border-radius:18px; border:1px solid rgba(95,211,165,.24); overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 60px rgba(34,181,115,.1); }
.mcp-banner-home img{ display:block; width:100%; max-width:100%; height:auto; }
@media (max-width:840px){ .mcp-card{ grid-template-columns:1fr; text-align:center; padding:28px 20px; } .mcp-txt p{ margin-inline:auto; } .mcp-agents,.mcp-ticks{ justify-content:center; align-items:center; } .mcp-frame{ order:2; } }

/* ——— studio fixes: profile, ring, modal, grid, contrast ——— */
.acct-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; }
.acct-initial{ display:grid; place-items:center; background:rgba(34,181,115,.16); color:var(--accent-bright); font-weight:900; font-size:16px; }
.modal-card{ background:var(--surface); border-radius:18px; max-width:430px; width:100%; padding:26px; box-shadow:var(--shadow); max-height:92dvh; overflow-y:auto; }
.modal-card h3{ margin:0 0 14px; font-size:19px; font-weight:900; display:flex; align-items:center; gap:8px; }
.modal-card input{ width:100%; background:var(--field); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:11px 14px; margin-bottom:12px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.form-err{ color:var(--danger-bright); font-weight:700; font-size:14px; min-height:20px; margin:0 0 6px; }
#voicePanel, .voice-panel-clip{ overflow-x:clip; }
#studioVoices{ grid-template-columns:repeat(auto-fill, minmax(min(160px,100%), 1fr)); }
#studioVoices .voice-card{ min-width:0; }
#studioVoices .voice-top{ min-width:0; }
#studioVoices .voice-tools{ flex:none; }
.card input[type=text], .card input[type=email], .card input[type=password], .card select, .card textarea{ color:#F2F4F1; }
.card input::placeholder, .card textarea::placeholder{ color:#8A918A; opacity:1; }
select option{ color:#14161A; background:#fff; }

/* ——— voice panel: kill horizontal overflow for good ——— */
.voice-panel .voice-grid{ overflow-x:hidden; overflow-y:auto; scrollbar-gutter:stable; padding-inline-end:10px; }
#studioVoices .voice-top{ overflow:hidden; }
#studioVoices .voice-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#studioVoices .voice-tags{ flex-wrap:wrap; }

/* ——— history rows: actions on their own line on small screens; text readable ——— */
.h-actions{ display:contents; }
.history-item .meta span{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width: 700px){
  .h-actions{ display:flex; flex:1 1 100%; gap:8px; flex-wrap:wrap; align-items:center; margin-top:2px; }
  body{ padding-bottom:118px; }
  .page{ padding-bottom:118px; }
}

/* ——— Emotion Pack ——— */
.emotion-row{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.emotion-side{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.intensity{ display:inline-flex; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px; }
.intensity button{ border:0; background:transparent; color:var(--muted); font-family:inherit; font-weight:800; font-size:13.5px; padding:5px 14px; border-radius:999px; cursor:pointer; }
.intensity button.active{ background:var(--accent); color:#04150C; }
.chip.emo.active{ background:var(--accent); color:#04150C; border-color:var(--accent); }

/* ═══ Studio redesign v2 (1 Nov) — calm, one job per zone ═══ */
#viewTry .composer-card{ padding:22px 20px; border-radius:20px; }
#viewTry .voice-head{ gap:14px; }
#viewTry .voice-head img{ width:54px; height:54px; border-radius:50%; object-fit:cover; }
#viewTry .vh-name{ font-size:19px; font-weight:900; }
#scriptText{ font-size:16.5px; line-height:1.75; min-height:104px; padding:14px; border-radius:14px; }
#viewTry .gen-row .btn-lg{ height:54px; font-size:17px; border-radius:999px; }
/* voice picker: big readable tiles, preview is the only tool */
#studioVoices.studio-grid{ grid-template-columns:repeat(auto-fill,minmax(min(158px,100%),1fr)); gap:10px; }
#studioVoices .voice-card{ padding:16px 12px 13px; border-radius:16px; }
#studioVoices .voice-top{ flex-direction:column; align-items:center; gap:9px; text-align:center; }
#studioVoices .avatar{ width:62px; height:62px; font-size:24px; }
#studioVoices .voice-name{ font-size:15.5px; }
#studioVoices .voice-tools{ display:flex; justify-content:center; }
#studioVoices .preview-btn{ width:40px; height:40px; background:rgba(34,181,115,.14); color:var(--accent-bright); }
#studioVoices .cmp-btn, #studioVoices .fav-btn{ display:none; }
#studioVoices .voice-tags{ justify-content:center; margin-top:10px; }
#studioVoices .voice-card.selected{ border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent), 0 8px 24px rgba(34,181,115,.14); }
#studioFilterChips{ margin:12px 0 4px; }
/* result: dark, quiet, one row of actions */
.result-box{ background:var(--surface); border:1px solid rgba(34,181,115,.45); border-radius:16px; padding:18px; }
.result-head{ color:var(--accent-bright); }
.result-actions{ display:flex; gap:8px; }
.result-actions .btn{ flex:1; height:46px; }
/* folds live in their own quiet stack now */
.studio-tools{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.studio-tools .agent-box{ background:var(--surface); border:1px solid var(--line); border-radius:16px; margin:0; }
@media (max-width:700px){ #viewTry .composer-card{ padding:18px 14px; } }

/* ═══ Studio overhaul v113 (2 Nov) — tokens, tiers, premium finish ═══ */
.tokens-meter { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; margin-bottom: 12px; font-size: 13.5px; box-shadow: var(--shadow-sm); animation: dropIn .5s cubic-bezier(0.34, 1.56, 0.64, 1); max-width: 100%; }
.tokens-meter .mm-track { flex: 1; min-width: 0; }
#tokensFill { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #2BB673, #1E9E66); transition: width .8s cubic-bezier(0.16, 1, 0.3, 1); }
/* model menu: glass segmented control with a sliding indicator */
.model-seg-wrap { margin-bottom: 14px; }
.model-seg { position: relative; display: flex; gap: 0; padding: 4px; border-radius: 999px; background: rgba(18, 20, 23, .55); border: 1px solid rgba(255, 255, 255, .09); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .22); }
.seg-ind { position: absolute; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: linear-gradient(180deg, #2BC47F, #1E9E66); box-shadow: 0 4px 14px rgba(34, 181, 115, .28); transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1); }
.seg-btn { position: relative; z-index: 1; flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink2); font-family: inherit; font-weight: 900; font-size: 15px; padding: 9px 4px; border-radius: 999px; cursor: pointer; transition: color .2s; }
.seg-btn.active { color: #fff; }
.seg-btn:active { transform: scale(.97); }
.model-desc { color: var(--muted, #8A918A); font-size: 13px; font-weight: 700; margin: 8px 4px 0; text-align: center; }
/* clone entry tile at the top of the voice picker */
.clone-tile { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 13px 14px; margin-bottom: 12px; border-radius: 16px; border: 1px solid rgba(95, 211, 165, .4); background: linear-gradient(135deg, rgba(34, 181, 115, .16), rgba(34, 181, 115, .05)); color: inherit; font-family: inherit; cursor: pointer; transition: transform .15s cubic-bezier(0.16, 1, 0.3, 1), border-color .15s; }
.clone-tile:active { transform: scale(.985); }
.clone-tile-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(34, 181, 115, .22); color: var(--accent-bright); }
.clone-tile-ic svg { width: 21px; height: 21px; }
.clone-tile-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.clone-tile-tx b { font-size: 16px; font-weight: 900; line-height: 1.35; }
.clone-tile-tx small { color: var(--muted, #8A918A); font-size: 12.5px; font-weight: 700; }
.clone-tile-chev { flex: none; width: 18px; height: 18px; color: var(--accent-bright); }
/* in-card advanced fold */
#composerCard .adv-main { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin: 14px 0 0; }
#composerCard .adv-main .adv-row { display: flex; align-items: center; }
#composerCard .adv-main .expr-row { margin-top: 0; }
#composerCard .adv-main .emotion-row { margin-top: 4px; }
#charCount.over { color: var(--danger-bright); font-weight: 900; }
#studioGenderChips { margin-bottom: 12px; }
.card.flash { animation: cardFlash 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cardFlash { 0%, 60% { box-shadow: 0 0 0 2px rgba(34, 181, 115, .85), 0 0 34px rgba(34, 181, 115, .3); } 100% { box-shadow: var(--shadow-sm); } }
@media (prefers-reduced-motion: reduce) {
  .tokens-meter { animation: none !important; }
  #tokensFill { transition: none !important; }
  .seg-ind { transition: none !important; }
  .clone-tile { transition: none !important; }
  .clone-tile:active { transform: none !important; }
  .card.flash { animation: none !important; }
}

/* ===== Studio round (2 Nov 2026): per-char tokens, profile entry, voice-switch polish, dialogue in متقدم ===== */
.tokens-meter { cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.tokens-meter:hover, .tokens-meter:focus-visible { border-color: rgba(34,181,115,.55); outline: none; }
.tokens-meter .tm-chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.voice-head { overflow: hidden; }
.voice-head img { box-shadow: 0 0 0 2px rgba(34,181,115,.0); }
.voice-head.vh-swap img { animation: vhImgIn .5s cubic-bezier(0.16,1,0.3,1) both; }
.voice-head.vh-swap .vh-info { animation: vhInfoIn .42s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes vhImgIn { 0% { opacity: .25; transform: scale(.86); box-shadow: 0 0 0 0 rgba(34,181,115,.0); } 55% { opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 3px rgba(34,181,115,.65), 0 0 22px rgba(34,181,115,.35); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 2px rgba(34,181,115,.35); } }
@keyframes vhInfoIn { 0% { opacity: 0; transform: translateY(7px); } 100% { opacity: 1; transform: translateY(0); } }
#studioVoices .voice-card { transition: border-color .22s ease, box-shadow .22s ease, background .22s ease; }
#studioVoices .voice-card.pop { animation: tilePop .38s cubic-bezier(0.16,1,0.3,1); }
@keyframes tilePop { 0% { transform: scale(.97); } 55% { transform: scale(1.025); } 100% { transform: scale(1); } }
.dlg-group { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.dlg-label { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13.5px; color: var(--ink2); margin-bottom: 9px; }
.dlg-label svg { width: 16px; height: 16px; color: var(--accent); }
.dlg-group .dialog-row { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .voice-head.vh-swap img, .voice-head.vh-swap .vh-info, #studioVoices .voice-card.pop { animation: none !important; }
  .tokens-meter { transition: none !important; }
}

/* ——— profile drawer (v115) ——— */
.acct-open{ background:none; border:0; padding:0; cursor:pointer; border-radius:50%; line-height:0; flex:none; transition:transform .15s ease; }
.acct-open:active{ transform:scale(.93); }
.acct-name{ font-weight:900; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drawer-backdrop{ position:fixed; inset:0; z-index:150; background:rgba(3,4,5,.45); -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.drawer-backdrop.show{ opacity:1; pointer-events:auto; }
.profile-drawer{ position:fixed; top:0; bottom:0; inset-inline-start:0; z-index:160; width:min(86vw,340px); max-width:100%; background:var(--surface); border-inline-end:1px solid var(--line); border-start-end-radius:22px; border-end-end-radius:22px; box-shadow:-18px 0 50px rgba(0,0,0,.45); transform:translateX(106%); transition:transform .28s cubic-bezier(0.32,0.72,1); display:flex; flex-direction:column; padding:18px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto; overflow-x:clip; overscroll-behavior:contain; }
.profile-drawer.open{ transform:translateX(0); }
.drawer-close{ position:absolute; top:14px; inset-inline-end:14px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink); display:grid; place-items:center; cursor:pointer; z-index:2; }
.drawer-close svg{ width:17px; height:17px; }
.drawer-head{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:16px; }
.dr-watermark{ position:absolute; inset-inline-end:-28px; bottom:-34px; width:150px; height:150px; opacity:.07; pointer-events:none; }
.dr-id{ position:relative; display:flex; align-items:center; gap:11px; min-width:0; }
.dr-avatar{ width:46px !important; height:46px !important; font-size:20px; }
.dr-id-tx{ flex:1; min-width:0; }
.dr-id-tx b{ display:block; font-size:16.5px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dr-id-tx small{ display:block; color:var(--muted); font-weight:600; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dr-id .plan-chip{ flex:none; }
.dr-bal{ position:relative; margin-top:15px; }
.dr-bal-top{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.dr-bal-top b{ font-size:19px; font-weight:900; }
.dr-bal-top span{ color:var(--muted); font-size:12.5px; font-weight:700; }
.dr-bal-top .dr-pct{ margin-inline-start:auto; color:var(--accent-bright); font-size:13.5px; }
.dr-track{ height:8px; background:#23272C; border-radius:99px; overflow:hidden; margin-top:8px; }
.dr-track i{ display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-bright)); border-radius:99px; transition:width .5s cubic-bezier(0.16,1,0.3,1); }
.drawer-menu{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.drawer-row{ display:flex; align-items:center; gap:11px; width:100%; max-width:100%; padding:11px 12px; background:transparent; border:1px solid transparent; border-radius:14px; color:var(--ink); font:inherit; font-weight:800; font-size:14.5px; cursor:pointer; text-align:start; transition:background .18s ease, transform .12s ease; }
.drawer-row:hover{ background:rgba(255,255,255,.04); }
.drawer-row:active{ transform:scale(.985); }
.dr-ic{ width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:11px; background:rgba(34,181,115,.13); color:var(--accent-bright); }
.dr-ic svg{ width:19px; height:19px; }
.dr-label{ flex:1; min-width:0; }
.dr-chev{ width:17px; height:17px; color:var(--muted); flex:none; }
.profile-drawer.open .drawer-head{ animation:drIn .3s cubic-bezier(0.16,1,0.3,1) both; }
.profile-drawer.open .drawer-row{ animation:drIn .32s cubic-bezier(0.16,1,0.3,1) both; animation-delay:var(--d,0ms); }
@keyframes drIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
.drawer-edit{ padding:2px 12px 12px; }
.drawer-edit .fld-label{ display:block; margin:8px 0 6px; }
.dr-name-row{ display:flex; gap:8px; }
.dr-name-row input{ flex:1; min-width:0; background:var(--field); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:10px 13px; font-size:16px; }
.dr-email{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:12px; font-size:13px; }
.dr-email span{ color:var(--muted); font-weight:700; flex:none; }
.dr-email b{ font-weight:800; direction:ltr; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.drawer-foot{ margin-top:auto; padding-top:16px; }
.drawer-logout{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; border-radius:14px; border:1px solid rgba(240,149,140,.28); background:rgba(240,149,140,.08); color:var(--danger-bright); font:inherit; font-weight:900; font-size:14.5px; cursor:pointer; transition:transform .12s ease, background .18s ease; }
.drawer-logout:active{ transform:scale(.985); }
.drawer-logout svg{ width:18px; height:18px; }
@media (prefers-reduced-motion: reduce){
  .profile-drawer{ transition:opacity .15s ease; opacity:0; pointer-events:none; }
  .profile-drawer.open{ opacity:1; pointer-events:auto; }
  .profile-drawer.open .drawer-head, .profile-drawer.open .drawer-row{ animation:none !important; }
  .dr-track i{ transition:none; }
  .drawer-backdrop{ transition:opacity .15s ease; }
}

/* ═══════════ VISUAL COMFORT RESTRUCTURE — v116 (2 Nov) ═══════════
   Softer warm-charcoal foundation, calm emerald, larger radii, more air.
   One ambience glow per screen; glass only on floating layers. */
body{
  line-height:1.75;
  background:
    radial-gradient(ellipse 85% 30% at 50% -4%, rgba(34,181,115,.075), transparent 62%) no-repeat,
    var(--bg);
}
::selection{ background:rgba(34,181,115,.32); color:#F2F4F1; }
:focus-visible{ outline:3px solid rgba(34,181,115,.5); }
::-webkit-scrollbar-thumb{ background:#2B312D; border-color:var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#39413B; }

/* cards: soft top-light, hairline border, deep soft shadow, calmer geometry */
.card{
  border-radius:var(--r);
  border-color:var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 42%), var(--surface);
  box-shadow:var(--shadow-sm), var(--hi);
  padding:26px;
}
.account-card{ border-radius:16px; background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-sm), var(--hi); }
.voice-card{ border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 46%), var(--surface); }
.voice-card:hover{ border-color:var(--line-strong); }
.voice-list{ border-radius:var(--r); border-color:var(--line); }
.plan-card{ border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 42%), var(--surface); box-shadow:var(--shadow-sm), var(--hi); }
.faq{ border-radius:16px; border-color:var(--line); background:var(--surface); }
.how-card,.fact,.stat-card,.sample-card{ border-color:var(--line); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 46%), var(--surface); }
.project-card{ border-radius:16px; }
.scard{ border-radius:18px; }
.dcard{ border-color:var(--line); border-radius:20px; }
.vcard-img{ border-radius:18px; }
.feat-card{ border-color:var(--line); border-radius:20px; }
.feat-row{ border-color:var(--line); border-radius:20px; }

/* type: a touch calmer, airier */
.section-head h2{ font-size:clamp(24px,3.2vw,31px); }
.section-head p{ line-height:1.8; }
.try-intro h1{ font-size:clamp(26px,3.8vw,36px); }
.page{ padding-bottom:72px; }
.voice-grid,.plan-list{ gap:16px; }

/* primary action: muted deep-emerald gradient, never a flat neon slab */
.btn-primary{
  background:linear-gradient(180deg, #27B877, #1C9A63);
  box-shadow:0 8px 22px rgba(34,181,115,.20), var(--hi);
}
.btn-primary:hover{ background:linear-gradient(180deg, #27B877, #1C9A63); filter:brightness(1.06); }
.btn-outline{ box-shadow:var(--hi); }
.btn-white{ background:#EDF1EC; }
.btn-white:hover{ background:#DFE6DE; }

/* floating layers get the glass */
.tabbar{ background:rgba(15,18,16,.86); border-color:var(--line); box-shadow:0 16px 38px rgba(0,0,0,.42); }
.modal{ background:rgba(6,8,7,.58); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.modal-box,.modal-card{ border-radius:22px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 40%), var(--surface); }
.toast{ background:#EDF1EC; box-shadow:0 14px 34px rgba(0,0,0,.4); }
.compare-bar,.mobile-gen-bar,.wizard-nav{ background:rgba(15,18,16,.9); border-color:var(--line); }
.profile-drawer{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 30%), var(--surface); box-shadow:-18px 0 50px rgba(0,0,0,.42); }
.drawer-head{ background:var(--surface2); border-color:var(--line); border-radius:20px; }
.topbar{ border-color:var(--line); }
@media (min-width:1024px){ .topbar{ background:var(--surface); border-color:var(--line); } }

/* fields sit a shade deeper than the card, ring stays soft */
.card input[type=text], .card input[type=email], .card input[type=password], .card select, .auth-form input, textarea, .proj-create input, .modal-card input, .dr-name-row input, select{
  background:var(--field);
}
.card input:focus,.card select:focus,.auth-form input:focus,textarea:focus{ box-shadow:0 0 0 3px var(--accent-soft); }

/* misc alignments to the token system */
.hero-carousel{ border-radius:24px; background:var(--field); }
.skel-card{ background:var(--surface2); }
.wave-canvas{ background:rgba(255,255,255,.03); }
.api-key-row{ background:var(--surface2); border-color:var(--line); border-radius:14px; }
.vchip{ border-color:var(--line); background:var(--surface2); }
.vchip.sel{ border-color:rgba(255,255,255,.6); background:var(--surface3); }
.intensity{ background:var(--surface2); border-color:var(--line); }
.result-box{ border-radius:18px; }
#composerCard .adv-main, .studio-tools .agent-box{ background:var(--surface); border-color:var(--line); border-radius:18px; }
.model-seg{ background:rgba(19,22,20,.6); border-color:var(--line); }
.clone-tile{ border-color:rgba(95,211,165,.3); }
.fan .film-card{ box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 30px rgba(34,181,115,.12); }
.fan .pos-c{ box-shadow:0 34px 80px rgba(0,0,0,.55), 0 0 48px rgba(34,181,115,.2); }
.mcp-frame{ box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 60px rgba(34,181,115,.1); }
@media (max-width:720px){ .card{ padding:20px 18px; } }