/* ==========================================================================
   Madaran polish layer — presentation only, loaded last.
   Keeps the original identity (violet → plum → teal, night sidebar and login,
   orbiting button borders and sweeps) and refines type, spacing, depth and
   motion. Markup, workflow and features are untouched: remove this file to
   return to the previous look.
   ========================================================================== */
@property --glow{syntax:"<number>";initial-value:0;inherits:false}

:root{
  --m-ink:#241b33;--m-muted:#6f6582;--m-subtle:#978ca6;--m-line:rgba(82,54,120,.12);--m-canvas:#f7f5fb;
  --m-violet:#6a4bd4;--m-violet-deep:#5535b3;--m-plum:#a23f7a;--m-teal:#16877d;--m-teal-2:#1fa593;--m-peach:#f2a36b;
  --m-violet-soft:#f1edff;--m-plum-soft:#fbeef5;--m-teal-soft:#e6f6f2;--m-peach-soft:#fff3e6;
  --m-grad:linear-gradient(120deg,#6a4bd4 0%,#5535b3 40%,#a23f7a 74%,#16877d 125%);
  --m-grad-soft:linear-gradient(135deg,#f3efff 0%,#fbeef6 55%,#e8f7f4 100%);
  --m-night:radial-gradient(circle at 14% 0%,rgba(150,92,230,.42),transparent 22rem),radial-gradient(circle at 92% 100%,rgba(26,168,150,.34),transparent 24rem),linear-gradient(160deg,#2c1842 0%,#221432 48%,#10343a 112%);
  --m-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px var(--m-line),0 18px 44px -24px rgba(58,32,110,.3);
  --m-shadow-lift:0 1px 0 #fff inset,0 0 0 1px rgba(106,75,212,.2),0 28px 56px -26px rgba(76,46,160,.42);
  --m-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---- Type ---------------------------------------------------------------- */
body{font-size:15px}
.page-heading h1{font-size:clamp(26px,2.6vw,34px)!important;font-weight:800!important;letter-spacing:-.03em;color:var(--m-ink)!important}
.page-heading p,.panel-heading p{font-size:14.5px!important;line-height:1.95;color:var(--m-muted)!important}
.panel-heading h2{font-size:24px!important;font-weight:800!important;letter-spacing:-.02em}
.section-kicker,.step-badge{font-size:12px!important;font-weight:700;padding:5px 12px!important}
.field-label,.tools-field>span{font-size:14px!important;font-weight:700!important}
.field-hint{font-size:12.5px!important}
.topbar-title strong{font-size:19px!important;font-weight:800!important}
.autosave strong{font-size:12.5px!important}.autosave small{font-size:11.5px!important}
.profile-copy strong{font-size:13.5px!important}.profile-copy small{font-size:11.5px!important}
.template-info strong{font-size:14.5px!important;font-weight:800!important}.template-info small{font-size:12.5px!important}
.stat-card small{font-size:12.5px!important}.stat-card strong{font-size:28px!important;font-weight:850!important}
.dropzone strong{font-size:17px!important}.dropzone p{font-size:13.5px!important}.dropzone small{font-size:12.5px!important}

/* ---- Sidebar: the original night panel, deeper and alive ------------------ */
.sidebar{isolation:isolate;background:var(--m-night)!important;border-left:1px solid rgba(255,255,255,.06)!important}
.sidebar::after{content:"";position:absolute;z-index:-1;width:300px;height:300px;top:-90px;left:-120px;border-radius:50%;background:radial-gradient(circle,rgba(222,108,170,.26),transparent 64%);pointer-events:none;animation:m-drift 14s ease-in-out infinite alternate}
@keyframes m-drift{to{transform:translate(120px,220px) scale(1.2)}}
.brand strong{font-size:17px!important;font-weight:800!important;letter-spacing:-.02em}
.brand span{font-size:11.5px!important}
.nav-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;margin-inline:-6px;padding-inline:6px}
.nav-list::-webkit-scrollbar{display:none}
@media(max-height:960px){.sidebar-tip{display:none!important}}
.nav-item{min-height:46px!important;border-radius:15px!important;font-size:14px!important;font-weight:500;transition:background .25s,color .25s,transform .35s var(--m-ease),box-shadow .3s!important}
.nav-item .nav-icon{width:32px!important;height:32px!important;border-radius:11px;background:rgba(255,255,255,.07);transition:background .3s,color .3s,transform .35s var(--m-ease)}
.nav-item:hover{transform:translateX(-3px)}
.nav-item:hover .nav-icon{background:rgba(255,255,255,.13)}
.nav-item.active{font-weight:700}
.nav-item.active .nav-icon{color:#fff;background:var(--m-grad);box-shadow:0 8px 18px -6px rgba(85,53,179,.55)}
.nav-caption{font-size:11.5px!important}
.nav-count{font-size:11px!important}
.sidebar-tip strong{font-size:13px!important}.sidebar-tip p{font-size:11.5px!important}
.sidebar-footer{font-size:10.5px!important}
.sidebar-install{font-size:12.5px!important;min-height:46px!important;border-radius:15px!important}

/* ---- Buttons: original gradient, orbit and sweep, plus a light that follows
   the pointer and a warmer lift ---------------------------------------------- */
.button{font-size:14.5px!important;font-weight:700!important;min-height:48px;transition:transform .3s var(--m-ease),box-shadow .3s,background-position .6s var(--m-ease),--glow .35s,color .2s,background-color .2s!important}
.button.compact{min-height:40px;font-size:13.5px!important}
.button.primary,.auth-submit,.mobile-stage-primary,.quick-download,.share-main{
  background-image:radial-gradient(130px circle at var(--x,50%) var(--y,50%),rgba(255,255,255,calc(var(--glow)*.34)),transparent 70%),linear-gradient(120deg,#6a4bd4 0%,#5535b3 33%,#a23f7a 58%,#16877d 96%)!important;
  background-size:100% 100%,130% 100%!important;background-position:0 0,0% 0!important}
@media(hover:hover){
  .button.primary:hover,.auth-submit:hover,.mobile-stage-primary:hover,.quick-download:hover,.share-main:hover{--glow:1;background-position:0 0,100% 0!important;transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(85,53,179,.55),0 8px 18px -10px rgba(162,63,122,.45)!important}
  .button.secondary:hover,.button.ghost:hover{transform:translateY(-2px)}
  .button.secondary:hover{box-shadow:0 0 0 1px rgba(106,75,212,.28),0 14px 28px -16px rgba(85,53,179,.45)!important}
}
.button:active{transform:scale(.97)!important}
.button.primary:disabled{filter:saturate(.35);opacity:.72;transform:none!important}

/* ---- Cards ---------------------------------------------------------------- */
.archive-card,.template-card,.doc-draft,.gallery-card{transition:transform .35s var(--m-ease),box-shadow .35s!important}
@media(hover:hover){.archive-card:hover,.template-card:hover,.doc-draft:hover,.gallery-card:hover{transform:translateY(-5px)!important;box-shadow:var(--m-shadow-lift)!important}}
.template-card.selected{box-shadow:0 0 0 2px var(--m-violet),0 24px 48px -22px rgba(85,53,179,.5)!important}
.selection-check{animation:m-pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes m-pop{from{transform:scale(0)}}
.stat-card{transition:transform .35s var(--m-ease),box-shadow .35s}
@media(hover:hover){.stat-card:hover{transform:translateY(-3px);box-shadow:var(--m-shadow-lift)}}

/* ---- Stepper: all eight steps in one row on desktop, living active step ---- */
.wizard-step div strong{font-size:13px!important}
.wizard-step.active>span{animation:m-pulse 2.6s ease-out infinite}
@keyframes m-pulse{0%{box-shadow:0 0 0 0 rgba(106,75,212,.4),0 12px 26px -10px rgba(85,53,179,.45)}70%{box-shadow:0 0 0 11px rgba(106,75,212,0),0 12px 26px -10px rgba(85,53,179,.45)}100%{box-shadow:0 0 0 0 rgba(106,75,212,0),0 12px 26px -10px rgba(85,53,179,.45)}}
.wizard-line{transition:background .5s}
@media(min-width:861px){
  .wizard{overflow-x:auto;scrollbar-width:none}
  .wizard::-webkit-scrollbar{display:none}
  .wizard-step{min-width:0!important;flex:0 1 auto;gap:9px!important}
  .wizard-step div small{display:none!important}
  .wizard-step div strong{white-space:nowrap}
  .wizard-line{flex:1 1 12px;min-width:10px;margin:0 6px!important}
}
@media(min-width:861px) and (max-width:1280px){.wizard-step div{display:none}.wizard-step.active div{display:block}}
.overall-chip small{font-size:11.5px!important}.overall-chip strong{font-size:13.5px!important}

/* ---- Fields ---------------------------------------------------------------- */
.text-input,.input-wrap textarea,.content-field textarea,.tools-field select,.tools-field textarea,.tools-field input:not([type=checkbox]){font-size:15px!important;transition:border-color .2s,box-shadow .25s!important}
.text-input:focus,.input-wrap textarea:focus,.content-field textarea:focus,.tools-field :is(input,select,textarea):focus{border-color:rgba(106,75,212,.55)!important;box-shadow:0 0 0 4px rgba(106,75,212,.12)!important;outline:0!important}
input[type=checkbox],input[type=radio]{accent-color:var(--m-violet)}

/* ---- Dropzones and progress ------------------------------------------------ */
.upload-illustration,.doc-file-symbol{animation:m-float 4s ease-in-out infinite}
@keyframes m-float{50%{transform:translateY(-5px)}}
.progress-track i{background-size:200% 100%!important;animation:m-sheen 2.2s linear infinite}
@keyframes m-sheen{to{background-position:-200% 0}}

/* ---- Tool pages: hero in the app's night colours --------------------------- */
.tr-hero{background:var(--m-night)!important;box-shadow:0 30px 70px -32px rgba(40,20,80,.6)!important}
.tr-hero::after{background:radial-gradient(circle,rgba(242,163,107,.55) 0%,transparent 66%)!important;opacity:.7}
.tr-hero h1 em{background:linear-gradient(90deg,#ffd6b8,#f7a8c8 60%,#9fe6d8)!important;-webkit-background-clip:text!important;background-clip:text!important}
.tr-drop-icon{background:var(--m-grad)!important}
#document-studio .doc-heading{position:relative;isolation:isolate;padding:34px 38px;border-radius:32px;overflow:hidden;color:#fff;background:var(--m-night);box-shadow:0 30px 70px -32px rgba(40,20,80,.6)}
#document-studio .doc-heading::after{content:"";position:absolute;z-index:-1;width:340px;height:340px;left:-90px;bottom:-200px;border-radius:50%;background:radial-gradient(circle,rgba(242,163,107,.45),transparent 66%);animation:m-drift 16s ease-in-out infinite alternate}
#document-studio .doc-heading h1{color:#fff;font-size:clamp(28px,3.2vw,42px);font-weight:900;letter-spacing:-.03em}
#document-studio .doc-heading p{color:rgba(255,255,255,.84);font-size:15.5px}
#document-studio .doc-heading .tools-eyebrow{display:inline-flex;padding:7px 14px;border-radius:999px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:13px}
#document-studio .doc-heading>.button,#transcript-studio .tr-new{white-space:nowrap;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important;background:rgba(255,255,255,.12)!important;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)!important}
#document-studio .doc-heading>.button:hover,#transcript-studio .tr-new:hover{background:rgba(255,255,255,.24)!important}
.doc-admin{padding:0!important}
.doc-admin>summary{padding:16px 24px;min-height:56px!important;display:flex;align-items:center;gap:10px;font-weight:700;list-style:none;cursor:pointer;color:var(--m-violet-deep)}
.doc-admin>summary::-webkit-details-marker{display:none}
.doc-admin>summary::before{content:"";width:9px;height:9px;border-inline-start:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(135deg);transition:transform .25s}
.doc-admin[open]>summary::before{transform:rotate(45deg)}
.doc-admin[open]>summary{border-bottom:1px solid var(--m-line)}
.doc-admin>form{padding:18px 24px 22px}

/* ---- Login: the original night sky, now drifting --------------------------- */
.auth-gate{isolation:isolate}
.auth-gate::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:8%;bottom:-220px;border-radius:50%;background:radial-gradient(circle,rgba(26,168,150,.3),transparent 65%);pointer-events:none;animation:m-drift 18s ease-in-out infinite alternate-reverse}
.auth-visual p{font-size:clamp(30px,3.2vw,44px)!important;font-weight:900!important;letter-spacing:-.03em}
.auth-visual small{font-size:14.5px!important}
.auth-copy h2{font-size:36px!important;font-weight:900!important;letter-spacing:-.03em}
.auth-copy p{font-size:14.5px!important}
.login-form>label{font-size:14px!important;font-weight:700}
.cookie-note{font-size:12px!important}

/* ---- Mobile shell -------------------------------------------------------- */
.mobile-app-nav button{font-size:12px!important;transition:background .3s,color .3s,transform .3s var(--m-ease)!important}
.mobile-app-nav button:active{transform:scale(.94)}
.mobile-start-over{font-size:12.5px!important}

/* ---- Full-screen mobile menu -------------------------------------------- */
@keyframes m-rise{from{opacity:.001;transform:translateY(14px)}}
@keyframes m-home-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(min-width:861px){.mobile-home{display:none!important}}

/* ---- Users, audit and analytics ------------------------------------------ */
.permission-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.perm-chip{display:inline-flex;align-items:center;min-height:24px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--m-violet-deep);background:var(--m-violet-soft)}
.perm-chip.all{color:#fff;background:var(--m-grad)}
.perm-chip.muted{color:#8b7f99;background:#f2eff5}
.perm-chip.doc{color:#2b5bb8;background:#eaf0fd}
.perm-chip.voice{color:var(--m-plum);background:var(--m-plum-soft)}
.perm-chip.admin{color:#8a5a12;background:var(--m-peach-soft)}
.open-sessions{display:block;margin-top:4px;font-size:11.5px;color:var(--m-teal)}
.user-filter-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:5px;border-radius:999px;background:var(--m-grad-soft);box-shadow:inset 0 0 0 1px var(--m-line)}
.user-filter-tabs button{border:0;background:transparent;font:inherit;font-size:13.5px;padding:8px 14px;border-radius:999px;color:var(--m-muted);cursor:pointer;min-height:38px;transition:background .25s,color .25s,box-shadow .25s}
.user-filter-tabs button:hover{color:var(--m-ink)}
.user-filter-tabs button.active{background:#fff;color:var(--m-violet-deep);font-weight:800;box-shadow:0 8px 18px -10px rgba(85,53,179,.5)}
.user-action{font-size:12.5px!important;min-height:38px!important}
.user-action.sessions{color:#2f6f9b;background:#eef6fc}
.users-table th,.analytics-visits-table th{font-size:12px!important}
.users-table td{font-size:13.5px}
.permission-tools{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.permission-tools button{border:1px solid var(--m-line);background:#fff;color:var(--m-violet-deep);font:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .2s}
.permission-tools button:hover{background:var(--m-violet-soft)}
.permission-live-summary:empty{display:none}
.permission-live-summary{display:grid;gap:4px;margin:14px 0 6px;padding:14px 16px;border-radius:18px;background:var(--m-grad-soft);border:1px solid var(--m-line)}
.permission-live-summary strong{font-size:14px;color:var(--m-violet-deep)}
.permission-live-summary span{font-size:12.5px;line-height:1.9;color:var(--m-muted)}
.audit-filters{display:flex;flex-wrap:wrap;gap:12px;padding:0 22px 16px}
.audit-filters label{display:grid;gap:5px;min-width:170px;flex:1}
.audit-filters span{font-size:12.5px;font-weight:700;color:var(--m-muted)}
.audit-filters select{font:inherit;font-size:14px;min-height:44px;padding:8px 12px;border-radius:14px;border:1px solid var(--m-line);background:#fff;color:var(--m-ink)}
.analytics-live-strip small,.analytics-kpi small{font-size:12px!important}
.analytics-live-strip strong{font-size:22px!important}
.analytics-kpi p,.analytics-kpi p span{font-size:11.5px!important}
.analytics-card-head h2{font-size:17px!important;font-weight:800!important}
.analytics-card-head span{font-size:12px!important}
.metric-bars,.metric-action-grid{font-size:12.5px}
.analytics-visits-table td{font-size:12.5px!important}
.chart-legend span{font-size:12px!important}
.audit-facts small,.audit-facts span{font-size:12px!important}
/* ---- Channel switch (primary admin) --------------------------------------- */
.channel-target{display:grid;gap:8px;margin-top:12px}
.channel-target[hidden]{display:none}
.channel-target-title{font-size:12px;font-weight:700;color:var(--m-muted)}
.channel-target .channel-target-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:5px;border-radius:18px;background:var(--m-grad-soft);box-shadow:inset 0 0 0 1px var(--m-line)}
.channel-target .channel-target-options button{display:grid;gap:1px;width:auto;min-height:48px;padding:7px 10px;border:0;border-radius:14px;background:transparent;color:var(--m-muted);font:inherit;text-align:center;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.channel-target .channel-target-options button:hover{background:rgba(255,255,255,.6);color:var(--m-ink)}
.channel-target .channel-target-options button b{font-size:13px;font-weight:800}
.channel-target .channel-target-options button small{font-size:11px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.channel-target .channel-target-options button[aria-pressed=true]{background:#fff;color:var(--m-violet-deep);box-shadow:0 8px 18px -10px rgba(85,53,179,.55)}
.channel-target .channel-target-options button[aria-pressed=true][data-channel-choice=test]{color:#a0521c;box-shadow:0 0 0 2px rgba(242,163,107,.6),0 8px 18px -10px rgba(160,82,28,.45)}
.channel-target .channel-target-options button:disabled{opacity:.5;cursor:not-allowed}
.channel-target-note{margin:0;padding:9px 12px;border-radius:14px;background:var(--m-peach-soft);color:#8a5a12;font-size:12.5px;line-height:1.8}
.profile-menu{width:280px!important}
.profile-menu>span{font-size:12px!important;padding:6px 10px!important}
.profile-menu>button{font-size:13.5px!important;padding:10px 12px!important;border-radius:12px!important}
.profile-menu .channel-target{padding:8px 6px 4px;border-top:1px solid var(--m-line)}
.telegram-direct-panel .channel-target,#archive-publish-modal .channel-target{margin:12px 0 4px}

/* ---- Visit analytics: filters and visit paths ----------------------------- */
.analytics-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:12px 16px;margin-bottom:16px;border-radius:20px}
.analytics-audience{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--m-grad-soft);box-shadow:inset 0 0 0 1px var(--m-line)}
.analytics-audience button{border:0;background:transparent;font:inherit;font-size:13px;padding:7px 14px;min-height:36px;border-radius:999px;color:var(--m-muted);cursor:pointer;transition:background .25s,color .25s}
.analytics-audience button.active{background:#fff;color:var(--m-violet-deep);font-weight:800;box-shadow:0 8px 18px -10px rgba(85,53,179,.5)}
.analytics-test-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--m-muted);cursor:pointer}
#analytics-excluded{font-size:12px;color:var(--m-plum);margin-inline-start:auto}
#analytics-excluded:empty{display:none}
.visit-path{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;max-width:420px}
.visit-step{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:var(--m-violet-soft);font-size:12px;line-height:1.7;white-space:nowrap}
.visit-step b{font-weight:700;color:var(--m-violet-deep)}
.visit-step i{font-style:normal;color:var(--m-teal);font-size:11px;font-variant-numeric:tabular-nums}
.visit-arrow{color:var(--m-subtle);font-size:12px}
#analytics-entry-views{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}
#analytics-entry-views small{font-size:12px;color:var(--m-muted);margin-inline-end:4px}
/* Chart and table scroll inside their cards instead of widening the page. */
.analytics-main-grid>*,.analytics-breakdown-grid>*,.analytics-kpis>*{min-width:0}
@media(max-width:860px){.analytics-main-grid{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:720px){.analytics-filters{padding:12px}.analytics-audience{width:100%}.analytics-audience button{flex:1}#analytics-excluded{margin:0}}
/* ---- Toasts: a glass card with a coloured badge and a timer line. On phones
   they drop in just under the status bar instead of floating over the page. */
.toast-stack{position:fixed;z-index:10060;left:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{position:relative;display:flex;align-items:center;gap:12px;min-width:0!important;padding:13px 16px 15px!important;border-radius:20px!important;overflow:hidden;direction:rtl;color:#fff!important;
  background:linear-gradient(125deg,rgba(44,24,66,.95),rgba(29,42,58,.95))!important;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px -16px rgba(20,10,40,.6),inset 0 1px 0 rgba(255,255,255,.1)!important;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  pointer-events:auto;cursor:pointer;animation:toast-in .5s cubic-bezier(.2,1.3,.3,1) both!important}
.toast::before{content:none!important;display:none!important}
.toast.leaving{animation:toast-out .26s ease both!important}
.toast-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:12px;background:linear-gradient(140deg,#2bb8a3,#16877d);box-shadow:0 8px 18px -8px rgba(31,165,147,.9)}
.toast.warning .toast-icon{background:linear-gradient(140deg,#f6b37c,#d9783a);box-shadow:0 8px 18px -8px rgba(217,120,58,.9)}
.toast.error .toast-icon{background:linear-gradient(140deg,#ec7a90,#c03a55);box-shadow:0 8px 18px -8px rgba(192,58,85,.9)}
.toast-icon svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.toast>div{display:grid;gap:1px;min-width:0}
.toast strong{display:block;font-size:14px!important;font-weight:800;line-height:1.6;color:#fff}
.toast small{display:block;font-family:inherit!important;font-size:12.5px!important;line-height:1.7;color:rgba(255,255,255,.74)!important}
.toast-timer{position:absolute;right:0;left:0;bottom:0;height:3px;background:linear-gradient(270deg,#9fe6d8,#f7a8c8 55%,#a48cff);transform-origin:right;animation:toast-timer 3.6s linear both}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes toast-timer{to{transform:scaleX(0)}}
@media(max-width:860px){
  .toast-stack{top:calc(env(safe-area-inset-top,0px) + 10px);right:12px!important;left:12px!important;bottom:auto!important;width:auto}
  .toast{animation-name:toast-drop!important}
  .toast.leaving{animation-name:toast-lift!important}
}
@keyframes toast-drop{from{opacity:0;transform:translateY(-24px) scale(.96)}}
@keyframes toast-lift{to{opacity:0;transform:translateY(-16px) scale(.97)}}
@media(prefers-reduced-motion:reduce){.toast,.toast.leaving,.toast-timer{animation:none!important}}

/* ---- Status bar band (iPhone home-screen app) --------------------------------
   iOS 26 frosts the top of an installed web app wherever it finds no flat
   colour behind the status bar; our screens start with gradients, so the top
   turned whitish and the white clock vanished on light pages. One fixed strip
   of a flat colour exactly behind the status bar gives iOS that colour; on the
   dark screens a short fade joins it to the gradient below. */
.status-band{display:none}
@media (display-mode:standalone){
  .status-band{--band:#5d3bc2;display:block;position:fixed;z-index:10050;top:0;right:0;left:0;height:env(safe-area-inset-top,0px);background:var(--band)}
  html:has(body.mobile-home-open) .status-band{--band:#2e1946}
  html:has(#auth-gate.show) .status-band,html:has(.maintenance-screen:not([hidden])) .status-band{--band:#24133d}
  html:is(:has(body.mobile-home-open),:has(#auth-gate.show),:has(.maintenance-screen:not([hidden]))) .status-band::after{content:"";position:absolute;top:100%;right:0;left:0;height:18px;background:linear-gradient(var(--band),transparent);pointer-events:none}
}

@media(max-width:720px){
  .table-tools{flex-wrap:wrap;gap:12px}
  .user-filter-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;border-radius:18px}
  .user-filter-tabs button{flex:0 0 auto}
  .users-table{min-width:0!important}
  .users-table thead{display:none}
  .users-table,.users-table tbody,.users-table tr,.users-table td{display:block;width:100%}
  .users-table tr{margin:0 0 12px;padding:14px;border-radius:22px;background:#fff!important;box-shadow:var(--m-shadow)}
  .users-table td{padding:5px 0!important;border:0!important;font-size:13.5px}
  .users-table td:nth-child(2):not(:empty)::before{content:"تلفن: ";color:var(--m-muted)}
  .users-table td:nth-child(5)::before{content:"آخرین فعالیت: ";color:var(--m-muted)}
  .users-table td:last-child{position:static!important;min-width:0!important;box-shadow:none!important;background:transparent!important;padding-top:10px!important}
  .user-row-actions{flex-wrap:wrap;gap:8px!important}
  .user-action{width:auto!important;min-width:0!important;height:40px!important;padding:0 12px!important}
  .user-action span{display:inline!important}
  .audit-filters{padding:0 14px 14px}
  .audit-filters label{min-width:100%}
  .stat-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .stat-card{min-height:0!important;padding:12px 10px!important;flex-direction:column;align-items:flex-start!important;gap:6px!important;border-radius:20px!important}
  .stat-card .stat-icon{width:34px!important;height:34px!important;border-radius:12px!important}
  .stat-card small{font-size:11px!important}
  .stat-card strong{font-size:20px!important}
  #document-studio .doc-heading{padding:26px 22px;border-radius:26px}
}
@media(max-width:430px){
  .mobile-start-over{width:42px;padding:0!important}
  .mobile-start-over span{display:none}
  .topbar-title strong{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){
  .sidebar::after,.auth-gate::after,.mobile-home::after,#document-studio .doc-heading::after,.mobile-home-continue::after,.upload-illustration,.doc-file-symbol,.progress-track i,.wizard-step.active>span,.mobile-home,.mobile-home-tile,.selection-check{animation:none!important}
  .button,.nav-item,.archive-card,.template-card,.doc-draft,.mobile-home-tile,.stat-card{transition:none!important}
}

/* ---- Subscription and usage ---------------------------------------------- */
.usage-view{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.usage-view>*{min-width:0}
.usage-view svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.usage-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:36px 40px;border-radius:32px;overflow:hidden;color:#fff;background:var(--m-night);box-shadow:0 30px 70px -32px rgba(40,20,80,.6)}
.usage-hero::after{content:"";position:absolute;z-index:-1;width:360px;height:360px;left:-110px;bottom:-220px;border-radius:50%;background:radial-gradient(circle,rgba(222,108,170,.34),transparent 64%);animation:m-drift 16s ease-in-out infinite alternate}
.usage-hero .tools-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:13px}
.usage-hero .tools-eyebrow svg{width:16px;height:16px}
.usage-hero h1{margin:14px 0 6px;font-size:clamp(28px,3.4vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1.3;background:linear-gradient(90deg,#fff 0%,#ffd6b8 45%,#f7a8c8 70%,#9fe6d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.usage-hero p{margin:0;max-width:540px;color:rgba(255,255,255,.84);font-size:15px;line-height:2}
.usage-countdown{position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;padding:16px 22px 16px 18px;border-radius:26px;overflow:hidden}
.usage-countdown::before{content:"";position:absolute;z-index:-2;inset:-80%;background:conic-gradient(from 0deg,transparent 0 60%,rgba(159,230,216,.85) 76%,rgba(247,168,200,.9) 88%,transparent 100%);animation:usage-orbit 7s linear infinite}
.usage-countdown::after{content:"";position:absolute;z-index:-1;inset:1.5px;border-radius:25px;background:rgba(36,22,56,.94)}
.usage-countdown svg{width:76px;height:76px;flex:none;transform:rotate(-90deg)}
.usage-countdown circle{stroke-width:9}
.usage-countdown .track{stroke:rgba(255,255,255,.12)}
.usage-countdown .value{stroke:#9fe6d8;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 6px rgba(159,230,216,.55))}
.usage-countdown div{display:grid;gap:2px}
.usage-countdown small,.usage-countdown span{color:rgba(255,255,255,.7);font-size:12.5px}
.usage-countdown b{font-size:28px;font-weight:850;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#fff}
@keyframes usage-orbit{to{transform:rotate(1turn)}}
.usage-warning{margin:0;padding:12px 16px;border-radius:16px;background:var(--m-peach-soft);color:#8a4b1d;font-size:14px}
.usage-meters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.usage-meter{position:relative;display:grid;gap:18px;padding:24px;border-radius:28px;background:#fff;box-shadow:var(--m-shadow);overflow:hidden;transition:transform .35s var(--m-ease),box-shadow .35s}
.usage-meter::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--m-grad)}
@media(hover:hover){.usage-meter:hover{transform:translateY(-3px);box-shadow:var(--m-shadow-lift)}}
.usage-meter header{display:flex;align-items:center;gap:12px}
.usage-meter header strong{display:block;font-size:17px;font-weight:800;color:var(--m-ink)}
.usage-meter header small{color:var(--m-muted);font-size:12.5px}
.usage-meter-icon{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:15px;color:#fff;background:linear-gradient(140deg,#6a4bd4,#8c6cf0);box-shadow:0 12px 24px -10px rgba(106,75,212,.55)}
.usage-meter.transcript .usage-meter-icon{background:linear-gradient(140deg,#a23f7a,#e07aa8);box-shadow:0 12px 24px -10px rgba(162,63,122,.5)}
.usage-meter-icon svg{width:22px;height:22px}
.usage-gauge{position:relative;width:min(210px,100%);margin:0 auto}
.usage-gauge svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.usage-gauge circle{stroke-width:12}
.usage-gauge .track{stroke:#efeaf7}
.usage-gauge .value{stroke-linecap:round;stroke-dashoffset:var(--offset);animation:usage-fill 1.3s var(--m-ease) both;filter:drop-shadow(0 6px 10px rgba(106,75,212,.25))}
.usage-gauge.low .value{stroke:#f2a36b}
.usage-gauge.out .track{stroke:#fbe3e8}
@keyframes usage-fill{from{stroke-dashoffset:var(--full)}}
.usage-gauge-label{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.usage-gauge-label b{font-size:44px;font-weight:900;line-height:1.1;background:var(--m-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.usage-gauge.low .usage-gauge-label b{background:linear-gradient(120deg,#e0813f,#f2a36b);-webkit-background-clip:text;background-clip:text}
.usage-gauge.out .usage-gauge-label b{background:linear-gradient(120deg,#c03a55,#e0627a);-webkit-background-clip:text;background-clip:text}
.usage-gauge-label small{color:var(--m-muted);font-size:13px;font-weight:600}
.usage-meter-foot{display:grid;gap:8px;color:var(--m-muted);font-size:13.5px;text-align:center}
.usage-bar,.usage-mini i{display:block;height:6px;border-radius:99px;background:#efeaf7;overflow:hidden}
.usage-bar b,.usage-mini em{display:block;height:100%;border-radius:inherit;background:var(--m-grad);animation:usage-grow-x 1.1s var(--m-ease) both;transform-origin:right}
@keyframes usage-grow-x{from{transform:scaleX(0)}}
.usage-meter.disabled{opacity:.75}
.usage-off{margin:0;padding:22px 16px;border-radius:20px;background:var(--m-canvas);color:var(--m-muted);text-align:center;font-size:14px;line-height:1.9}
.usage-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.usage-section-head h2{margin:4px 0 0;font-size:21px;font-weight:800;color:var(--m-ink)}
.usage-history-bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;height:170px;padding:0 2px}
.usage-day{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;align-items:end;gap:4px 3px;height:100%;min-width:0}
.usage-day .bar{display:block;min-height:3px;max-height:100%;border-radius:6px 6px 2px 2px;transform-origin:bottom;animation:usage-grow-y .9s var(--m-ease) both}
.usage-day .bar.translate{background:linear-gradient(180deg,#8c6cf0,#5535b3)}
.usage-day .bar.transcript{background:linear-gradient(180deg,#e07aa8,#a23f7a)}
.usage-day small{grid-column:1/-1;text-align:center;color:var(--m-subtle);font-size:11px}
.usage-day:last-child small{color:var(--m-violet);font-weight:800}
@keyframes usage-grow-y{from{transform:scaleY(0)}}
.usage-legend{display:flex;gap:18px;margin-top:14px;color:var(--m-muted);font-size:13px}
.usage-legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-left:6px;border-radius:4px;background:linear-gradient(180deg,#8c6cf0,#5535b3);vertical-align:-1px}
.usage-legend .transcript::before{background:linear-gradient(180deg,#e07aa8,#a23f7a)}
.usage-defaults{display:grid;gap:12px;padding:20px;margin-bottom:18px;border-radius:22px;background:var(--m-grad-soft)}
.usage-defaults>strong{font-size:15px;color:var(--m-ink)}
.usage-defaults .button{justify-self:start}
.usage-plan-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.usage-hint{margin:-4px 0 0;color:var(--m-muted);font-size:12.5px}
.usage-users{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.usage-user{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) auto;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:#fff;border:1px solid var(--m-line);transition:border-color .25s,box-shadow .25s}
.usage-user.editing{border-color:rgba(106,75,212,.4);box-shadow:0 14px 30px -20px rgba(85,53,179,.45)}
.usage-user-main{display:flex;align-items:center;gap:10px;min-width:0}
.usage-user-main div{min-width:0}
.usage-user-main strong{display:block;font-size:14.5px;color:var(--m-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usage-user-main small{display:block;color:var(--m-muted);font-size:12px}
.usage-avatar{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;color:#fff;font-weight:800;background:var(--m-grad)}
.usage-user-meters{display:grid;gap:7px}
.usage-mini{display:grid;gap:4px;color:var(--m-muted);font-size:12.5px}
.usage-mini b{color:var(--m-ink)}
.usage-mini.off{color:var(--m-subtle)}
.usage-user-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.usage-user-editor{grid-column:1/-1;display:grid;gap:10px;padding-top:12px;border-top:1px dashed var(--m-line)}
.usage-editor-actions{display:flex;gap:8px;flex-wrap:wrap}
.usage-gemini-clock{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:18px;background:var(--m-violet-soft);color:var(--m-violet-deep)}
.usage-gemini-clock svg{width:22px;height:22px}
.usage-gemini-clock span{display:grid}
.usage-gemini-clock small{font-size:12px;color:var(--m-muted)}
.usage-gemini-clock b{font-size:20px;font-weight:850;font-variant-numeric:tabular-nums}
.usage-facts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.usage-facts li{position:relative;padding-right:22px;color:var(--m-ink);font-size:14px;line-height:2}
.usage-facts li::before{content:"";position:absolute;right:2px;top:.8em;width:9px;height:9px;border-radius:50%;background:var(--m-grad)}
.usage-facts a{color:var(--m-violet);font-weight:700}
.usage-capacity{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.usage-capacity>div{display:grid;align-content:start;gap:2px;padding:16px;border-radius:20px;background:var(--m-grad-soft)}
.usage-capacity small{font-size:12.5px;color:var(--m-muted)}
.usage-capacity b{font-size:30px;font-weight:900;line-height:1.3;background:var(--m-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.usage-capacity span{font-size:12.5px;color:var(--m-muted);line-height:1.8}
.usage-models{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:18px}
.usage-model{display:grid;align-content:start;gap:7px;padding:16px;border-radius:20px;background:#fff;border:1px solid var(--m-line)}
.usage-model header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.usage-model header strong{font-weight:800;font-size:15px;color:var(--m-ink)}
.usage-model-id summary{cursor:pointer;font-size:11.5px;color:var(--m-subtle)}
.usage-model-id bdi{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:8px;background:#f4f1f8;color:var(--m-muted);font-size:11.5px;direction:ltr}
.usage-src{font-style:normal;font-size:11.5px;padding:3px 9px;border-radius:999px}
.usage-src.google{background:var(--m-teal-soft);color:#0d6a60}
.usage-src.typed{background:var(--m-violet-soft);color:var(--m-violet-deep)}
.usage-src.none{background:#f4f1f8;color:var(--m-muted)}
.usage-model-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;color:var(--m-muted)}
.usage-model-row b{color:var(--m-ink);font-size:16px;font-variant-numeric:tabular-nums}
.usage-model-row small{font-size:12px;color:var(--m-muted);font-weight:600}
.usage-model-bar{display:block;height:6px;border-radius:99px;background:#efeaf7;overflow:hidden}
.usage-model-bar em{display:block;height:100%;border-radius:inherit;background:linear-gradient(270deg,#6a4bd4,#1fa593);animation:usage-grow-x 1.1s var(--m-ease) both;transform-origin:right}
.usage-model-bar.month em{background:linear-gradient(270deg,#a23f7a,#f2a36b)}
.usage-model.low .usage-model-bar:not(.month) em{background:#f2a36b}
.usage-model.out .usage-model-bar:not(.month) em{background:#d9485f}
.usage-model-note{margin:0;font-size:12px;color:var(--m-muted);line-height:1.8}
.usage-model-input{display:grid;gap:4px;margin-top:4px;font-size:12px;color:var(--m-muted)}
.usage-model-input input{min-height:42px;border-radius:12px;border:1px solid var(--m-line);padding:0 12px;font:inherit;font-size:14px;background:#fbfafd;color:var(--m-ink)}
.usage-models-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--m-muted)}
.usage-today{margin:16px 0 0;padding:12px 16px;border-radius:16px;background:var(--m-teal-soft);color:#0d5e57;font-size:14px}
.usage-loading{color:var(--m-muted)}
.usage-pill{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:7px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.13);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .25s,transform .25s var(--m-ease)}
.usage-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#9fe6d8;box-shadow:0 0 0 4px rgba(159,230,216,.2)}
@media(hover:hover){.usage-pill:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}}
/* An account's own page: used and whole allowance only. */
.usage-hero-simple{grid-template-columns:1fr;padding:28px 32px}
.usage-hero-simple h1{margin-bottom:0}
.usage-simple-card{position:relative;display:grid;gap:18px;padding:24px;border-radius:28px;background:#fff;box-shadow:var(--m-shadow);overflow:hidden}
.usage-simple-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--m-grad)}
.usage-simple-card header{display:flex;align-items:center;gap:12px}
.usage-simple-card header strong{font-size:17px;font-weight:800;color:var(--m-ink)}
.usage-simple-card.transcript .usage-meter-icon{background:linear-gradient(140deg,#a23f7a,#e07aa8);box-shadow:0 12px 24px -10px rgba(162,63,122,.5)}
.usage-simple-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.usage-simple-nums>div{display:grid;gap:2px;padding:16px;border-radius:20px;background:var(--m-grad-soft)}
.usage-simple-nums small{font-size:13px;color:var(--m-muted)}
.usage-simple-nums b{font-size:38px;font-weight:900;line-height:1.25;font-variant-numeric:tabular-nums;background:var(--m-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.usage-simple-nums span{font-size:13px;color:var(--m-muted)}
/* The primary admin's overview of every account. */
.usage-history-bars{grid-template-columns:repeat(var(--days,14),minmax(0,1fr))}
.usage-history-bars.dense{gap:3px}
.usage-day small.quiet{visibility:hidden}
.usage-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.usage-overview>div{display:grid;align-content:start;gap:4px;padding:18px;border-radius:22px;background:#fff;box-shadow:var(--m-shadow)}
.usage-overview>div.alert{box-shadow:0 0 0 1.5px rgba(217,72,95,.4),0 18px 44px -24px rgba(217,72,95,.4)}
.usage-overview small{font-size:12.5px;color:var(--m-muted);font-weight:600}
.usage-overview>div>span{font-size:12px;color:var(--m-muted);line-height:1.8}
.usage-two{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;margin:0}
.usage-two b{font-size:28px;font-weight:900;line-height:1.3;font-variant-numeric:tabular-nums;background:var(--m-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.usage-two em{font-style:normal;font-size:12.5px;color:var(--m-muted);margin-left:6px}
.usage-csv svg{width:17px;height:17px}
.usage-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.usage-search{flex:1 1 240px;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--m-line);background:#fbfafd;color:var(--m-muted)}
.usage-search svg{width:18px;height:18px;flex:none}
.usage-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14px;color:var(--m-ink);outline:none}
.usage-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--m-muted)}
.usage-sort select{min-height:44px;border-radius:14px;border:1px solid var(--m-line);padding:0 12px;font:inherit;font-size:13.5px;background:#fbfafd;color:var(--m-ink)}
.usage-filters{flex:1 1 100%;min-width:0;max-width:100%;display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.usage-filters::-webkit-scrollbar{display:none}
.usage-filters button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--m-line);background:#fff;color:var(--m-ink);font:inherit;font-size:13px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.usage-filters button small{min-width:20px;padding:1px 6px;border-radius:99px;background:#f1edf8;color:var(--m-muted);font-size:11.5px;text-align:center}
.usage-filters button.active{background:var(--m-grad);border-color:transparent;color:#fff}
.usage-filters button.active small{background:rgba(255,255,255,.25);color:#fff}
.usage-user{grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1.5fr) auto}
.usage-user.out{border-color:rgba(217,72,95,.35)}
.usage-user.low{border-color:rgba(242,163,107,.5)}
.usage-user.open{border-color:rgba(106,75,212,.4);box-shadow:0 14px 30px -20px rgba(85,53,179,.45)}
.usage-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.usage-badge{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px}
.usage-badge.online{background:var(--m-teal-soft);color:#0d6a60}
.usage-badge.out{background:#fde8ec;color:#b3263f}
.usage-badge.low{background:var(--m-peach-soft);color:#9a5418}
.usage-badge.inactive{background:#f1eef5;color:var(--m-muted)}
.usage-mini.low em{background:#f2a36b}
.usage-mini.out em{background:#d9485f}
.usage-user-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin:0}
.usage-user-stats div{min-width:0}
.usage-user-stats dt{font-size:11.5px;color:var(--m-subtle)}
.usage-user-stats dd{margin:0;font-size:12.5px;color:var(--m-ink);font-variant-numeric:tabular-nums}
.usage-user-detail{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;padding-top:14px;border-top:1px dashed var(--m-line)}
.usage-user-detail strong{display:block;margin-bottom:10px;font-size:14px;color:var(--m-ink)}
.usage-detail-chart .usage-history-bars{height:120px}
.usage-work{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.usage-work li{display:inline-flex;align-items:baseline;gap:5px;padding:5px 10px;border-radius:12px;background:var(--m-grad-soft);font-size:12.5px;color:var(--m-muted)}
.usage-work b{color:var(--m-ink);font-size:14px}
.usage-detail-line{margin:0 0 6px;font-size:12.5px;color:var(--m-muted)}
.usage-reset-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--m-muted)}
.usage-reset-row span{flex-basis:100%}
.usage-empty{padding:22px;border-radius:20px;background:var(--m-canvas);color:var(--m-muted);text-align:center;font-size:14px}
@media(max-width:1100px){
  .usage-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .usage-user{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .usage-user-stats{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .usage-hero{grid-template-columns:1fr;padding:28px 22px 22px;border-radius:26px}
  .usage-countdown{justify-self:stretch}
  .usage-meters,.usage-plan-fields,.usage-capacity{grid-template-columns:1fr}
  .usage-user{grid-template-columns:1fr}
  .usage-user-actions{justify-content:flex-start}
  .usage-history-bars{gap:3px;height:140px}
  .usage-gauge{width:min(170px,100%)}
  .usage-meter{padding:20px}
  .usage-day:nth-child(odd):not(:last-child) small{visibility:hidden}
  .usage-history-bars.dense .usage-day small:not(.quiet){visibility:visible}
  .usage-hero-simple{padding:24px 22px}
  .usage-simple-nums b{font-size:32px}
  .usage-user-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .usage-user-detail{grid-template-columns:1fr}
  .usage-overview{gap:10px}
  .usage-overview>div{padding:14px;border-radius:18px}
  .usage-two b{font-size:23px}
  .usage-sort{flex:1 1 100%}
  .usage-sort select{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .usage-hero::after,.usage-countdown::before,.usage-gauge .value,.usage-day .bar,.usage-bar b,.usage-mini em,.usage-model-bar em{animation:none!important}
  .usage-meter,.usage-pill,.usage-countdown .value{transition:none!important}
}

/* ---- Mobile menu: bento tiles, sliding tab indicator, touch ripple ---------- */
.ripple-anchor{position:relative}
.ripple-host{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.ripple-host i{position:absolute;border-radius:50%;background:currentColor;opacity:.2;transform:scale(0);animation:m-ripple .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes m-ripple{to{transform:scale(1);opacity:0}}
@keyframes m-aurora{to{background-position:100% 70%}}
@keyframes m-flow{to{background-position:100% 50%}}
/* Buttons of sections an account does not have are left out; the others share the bar. */
.mobile-app-nav{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.mobile-app-nav button[hidden]{display:none!important}
.mobile-app-nav{isolation:isolate;background:rgba(255,255,255,.88)!important;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.mobile-nav-indicator{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;opacity:0;border-radius:17px;pointer-events:none;background:linear-gradient(145deg,#6545cf,#b73e83 66%,#149482);background-size:170% 170%;box-shadow:0 10px 24px rgba(91,53,175,.3);transition:transform .55s cubic-bezier(.34,1.45,.5,1),width .35s var(--m-ease),opacity .3s;animation:m-flow 7s ease-in-out infinite alternate}
.mobile-app-nav button{position:relative;z-index:1;transition:color .3s!important}
.mobile-app-nav button.active,.mobile-app-nav button.nav-current{background:transparent!important;box-shadow:none!important;color:#fff!important}
.mobile-app-nav button.nav-current svg{animation:m-nav-pop .55s cubic-bezier(.34,1.6,.5,1)}
.mobile-app-nav button.nav-current span{font-weight:800}
@keyframes m-nav-pop{40%{transform:translateY(-4px) scale(1.16)}}
@media(prefers-reduced-motion:reduce){.mobile-home::before,.mobile-nav-indicator,.mobile-home-grid:not(.compact) .mobile-home-tile[data-home-view=studio],.ripple-host i,.mobile-app-nav button.nav-current svg{animation:none!important}.mobile-nav-indicator{transition:none}}

/* ---- Mobile menu v3: night sky, glass tiles, animated illustrations ------ */
.mobile-home{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;gap:16px;overflow-y:auto;overscroll-behavior:contain;isolation:isolate;direction:rtl;color:#fff;
  padding:max(18px,calc(env(safe-area-inset-top) + 14px)) 18px max(26px,env(safe-area-inset-bottom));
  background:radial-gradient(120% 60% at 90% 0%,rgba(150,92,230,.5),transparent 60%),radial-gradient(90% 50% at 0% 100%,rgba(26,168,150,.38),transparent 65%),linear-gradient(170deg,#2c1842 0%,#1d1233 45%,#0f2a33 110%);
  animation:mh-fade .3s ease both}
.mobile-home[hidden]{display:none!important}
/* The iPhone home-screen app can end its view above the home indicator and
   paints the gap in the page colour: a white strip under the dark sign-in,
   maintenance and menu screens. While one of them is open the page colour
   follows its bottom edge (a left-to-right gradient matches at any height). */
html:has(#auth-gate.show),html:has(#auth-gate.show) body,html:has(.maintenance-screen:not([hidden])),html:has(.maintenance-screen:not([hidden])) body{background:linear-gradient(90deg,#192742,#144651 50%,#114c52) #144651}
html:has(body.mobile-home-open),body.mobile-home-open{background:linear-gradient(90deg,#17565b,#163f4c 50%,#132635) #163f4c}
body.mobile-home-open{overflow:hidden}
body.mobile-home-open .mobile-app-nav,body.mobile-home-open .mobile-stage-actions{visibility:hidden}
.mobile-home-sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.mh-sky{position:absolute;inset:0;width:100%;height:100%}
.mh-stars circle{fill:#fff;opacity:.7;transform-box:fill-box;transform-origin:center;animation:mh-twinkle 3.2s ease-in-out infinite}
.mh-stars .s1{animation-delay:1.1s;animation-duration:4.1s}.mh-stars .s2{animation-delay:2s;animation-duration:2.6s;fill:#c9f2ea}
.mh-planet{opacity:.42;transform-box:fill-box;transform-origin:center;animation:mh-planet 9s ease-in-out infinite}
.mh-planet ellipse{fill:none;stroke:rgba(214,198,255,.55);stroke-width:2}
.mh-shoot{stroke-width:2;stroke-linecap:round;fill:none;opacity:0;animation:mh-shoot 9s ease-in 2s infinite}
.mh-aurora{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;animation:mh-drift 16s ease-in-out infinite alternate}
.mh-aurora.a1{width:260px;height:260px;top:-60px;left:-80px;background:#a23f7a}
.mh-aurora.a2{width:300px;height:300px;top:38%;right:-140px;background:#5535b3;animation-duration:20s}
.mh-aurora.a3{width:240px;height:240px;bottom:-80px;left:10%;background:#16877d;animation-duration:18s}
.mobile-home>:not(.mobile-home-sky){animation:mh-rise .5s var(--m-ease) both}
.mobile-home-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Safari sized the text column to its narrowest word (the name broke into
   letters), so the column takes the free space and long names end in "…". */
.mobile-home-user{display:flex;flex:1 1 auto;align-items:center;gap:12px;min-width:0}
.mobile-home-user>div{flex:1 1 auto;min-width:0}
.mobile-home-user small{display:block;font-size:13px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-home-user strong{display:block;font-size:20px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-home-avatar{position:relative;display:grid;place-items:center;flex:0 0 52px;height:52px;border-radius:50%;font-size:22px;font-weight:800;color:#fff;background:var(--m-grad);box-shadow:0 12px 26px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.25)}
.mobile-home-avatar::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.35);animation:maintenance-spin 18s linear infinite}
.mobile-home-avatar::after{content:"";position:absolute;width:9px;height:9px;top:-5px;left:50%;margin-left:-4.5px;border-radius:50%;background:#8de6d6;box-shadow:0 0 10px #8de6d6;transform-origin:4.5px 31px;animation:maintenance-spin 6s linear infinite}
.mobile-home-close{display:grid;place-items:center;flex:0 0 46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:transform .3s var(--m-ease),background .2s}
.mobile-home-close:active{transform:rotate(90deg) scale(.92);background:rgba(255,255,255,.18)}
.mobile-home-close svg{width:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.mobile-home-hero{padding:6px 2px 4px;animation-delay:.05s!important}
.mobile-home-hero strong{display:block;font-size:31px;line-height:1.5;font-weight:900;letter-spacing:-.03em;background:linear-gradient(100deg,#fff 0%,#fff 35%,#d9c9ff 50%,#fff 65%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mh-text 6s ease-in-out infinite}
.mobile-home-hero small{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.74)}
.mobile-home-hero small i{width:8px;height:8px;border-radius:50%;background:#8de6d6;box-shadow:0 0 0 0 rgba(141,230,214,.6);animation:mh-ping 2s ease-out infinite}
.mobile-home-continue{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1px solid rgba(255,255,255,.18);border-radius:24px;text-align:right;cursor:pointer;color:#fff;font:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:0 20px 40px -22px rgba(0,0,0,.7);animation-delay:.08s!important}
.mobile-home-continue::after{content:"";position:absolute;inset:-40% auto -40% -35%;width:25%;background:rgba(255,255,255,.18);transform:skewX(-22deg);animation:buttonSweep 4.8s ease-in-out infinite}
.mobile-home-continue[hidden]{display:none}
.mobile-home-continue>span:last-child{min-width:0}
.mobile-home-continue b{display:block;font-size:16px;line-height:1.6}.mobile-home-continue small{display:block;font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-home-continue-icon{position:relative;display:grid;place-items:center;flex:0 0 50px;height:50px}
.mobile-home-continue-icon .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.mobile-home-continue-icon .ring circle{fill:none;stroke:rgba(255,255,255,.18);stroke-width:4}
.mobile-home-continue-icon .ring .value{stroke:#8de6d6;stroke-linecap:round;stroke-dasharray:calc(var(--p,0) * 1) 100;transition:stroke-dasharray .8s var(--m-ease)}
.mobile-home-continue-icon .play{width:20px;fill:#fff;stroke:none;animation:mh-nudge 1.8s ease-in-out infinite}
.mobile-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;animation:none!important}
.mobile-home-tile{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:150px;padding:16px;border-radius:26px;text-align:right;cursor:pointer;font:inherit;color:#fff;
  border:1px solid rgba(255,255,255,.13);background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:0 18px 34px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);
  animation:mh-tile .6s calc(var(--i,0) * 60ms + 120ms) cubic-bezier(.2,.9,.25,1.15) both;transition:transform .25s var(--m-ease),border-color .25s,background .25s;-webkit-tap-highlight-color:transparent}
.mobile-home-tile::before{content:"";position:absolute;z-index:-1;width:150px;height:150px;top:-60px;inset-inline-start:-50px;border-radius:50%;background:radial-gradient(circle,var(--glow,rgba(150,120,255,.35)),transparent 70%);opacity:.8;transition:transform .5s var(--m-ease),opacity .3s}
.mobile-home-tile::after{content:"";position:absolute;bottom:14px;inset-inline-end:14px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 6-6 6 6 6'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s var(--m-ease)}
.mobile-home-tile:active{transform:scale(.96);border-color:rgba(255,255,255,.3)}
.mobile-home-tile:active::before{transform:scale(1.5);opacity:1}
.mobile-home-tile:active::after{transform:translateX(-4px)}
.mobile-home-tile b{font-size:17px;font-weight:800;line-height:1.6;margin-top:auto}
.mobile-home-tile small{font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.7);padding-inline-end:34px}
.mobile-home-tile.offline{opacity:.55}
.mobile-home-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:20px;margin-bottom:6px;color:#fff;background:var(--badge,var(--m-grad));box-shadow:0 14px 26px -12px var(--shadow,rgba(106,75,212,.8)),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .35s cubic-bezier(.34,1.5,.5,1)}
.mobile-home-tile:active .mobile-home-icon{transform:rotate(-8deg) scale(1.08)}
.mobile-home-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mobile-home-icon .mh-art{width:42px;height:42px;overflow:visible;stroke-width:2.4}
.tone-violet{--badge:linear-gradient(140deg,#6a4bd4,#9b7bff);--shadow:rgba(106,75,212,.85);--glow:rgba(150,120,255,.4)}
.tone-teal{--badge:linear-gradient(140deg,#16877d,#3cc0a8);--shadow:rgba(22,135,125,.85);--glow:rgba(60,192,168,.35)}
.tone-peach{--badge:linear-gradient(140deg,#e07c5a,#f5b27a);--shadow:rgba(224,124,90,.85);--glow:rgba(245,178,122,.35)}
.tone-blue{--badge:linear-gradient(140deg,#3a6fd8,#7aa2ff);--shadow:rgba(58,111,216,.85);--glow:rgba(122,162,255,.35)}
.tone-rose{--badge:linear-gradient(140deg,#a23f7a,#e0729f);--shadow:rgba(162,63,122,.85);--glow:rgba(224,114,159,.38)}
.tone-night{--badge:linear-gradient(140deg,#4a3070,#2c1842);--shadow:rgba(0,0,0,.6)}
/* The first tile opens the studio: a wide gradient card with a moving sheen. */
.mobile-home-grid:not(.compact) .mobile-home-tile[data-home-view=studio]{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:2px;align-items:center;padding:18px;border:0;
  background:linear-gradient(120deg,#6a4bd4 0%,#5535b3 35%,#a23f7a 75%,#16877d 130%);background-size:180% 180%;box-shadow:0 22px 40px -20px rgba(106,75,212,.9);animation:mh-tile .6s 100ms cubic-bezier(.2,.9,.25,1.15) both,m-flow 8s ease-in-out infinite alternate}
.mobile-home-grid:not(.compact) .mobile-home-tile[data-home-view=studio] .mobile-home-icon{grid-row:span 2;width:72px;height:72px;margin:0;border-radius:24px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.mobile-home-grid:not(.compact) .mobile-home-tile[data-home-view=studio] .mh-art{width:52px;height:52px}
.mobile-home-grid:not(.compact) .mobile-home-tile[data-home-view=studio] b{margin-top:0;align-self:end;font-size:20px}
.mobile-home-grid:not(.compact) .mobile-home-tile[data-home-view=studio] small{align-self:start;color:rgba(255,255,255,.88)}
.mobile-home-grid:not(.compact) .mobile-home-tile[data-home-view=studio]::before{background:radial-gradient(circle,rgba(255,255,255,.3),transparent 70%)}
.mobile-home-grid:not(.compact) .mobile-home-tile[data-home-view=studio]::after{top:50%;bottom:auto;margin-top:-17px;width:34px;height:34px;background-color:rgba(255,255,255,.2)}
.mobile-home-grid:not(.compact) .mobile-home-tile:last-child:nth-child(even):not([data-home-view=studio]){grid-column:1/-1;min-height:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center}
.mobile-home-grid:not(.compact) .mobile-home-tile:last-child:nth-child(even):not([data-home-view=studio]) .mobile-home-icon{grid-row:span 2;margin:0}
.mobile-home-grid:not(.compact) .mobile-home-tile:last-child:nth-child(even):not([data-home-view=studio]) b{margin-top:0;align-self:end}
.mobile-home-section h3{display:flex;align-items:center;gap:10px;margin:8px 4px 12px;font-size:14px;font-weight:800;color:rgba(255,255,255,.75)}
.mobile-home-section h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25))}
.mobile-home-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mobile-home-grid.compact .mobile-home-tile{min-height:0;align-items:center;text-align:center;padding:14px 8px 12px;border-radius:22px;gap:2px}
.mobile-home-grid.compact .mobile-home-tile::after{display:none}
.mobile-home-grid.compact .mobile-home-icon{width:50px;height:50px;border-radius:17px;margin:0 0 6px}
.mobile-home-grid.compact .mobile-home-icon .mh-art{width:34px;height:34px}
.mobile-home-grid.compact .mobile-home-tile b{margin:0;font-size:13.5px;line-height:1.5}
.mobile-home-grid.compact .mobile-home-tile small{padding:0;font-size:11px;line-height:1.5;color:rgba(255,255,255,.6)}
.mobile-home-empty{margin:0;padding:22px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);text-align:center;color:rgba(255,255,255,.8);font-size:15px;line-height:1.9}
.mobile-home .channel-target{margin:0;padding:14px;border-radius:22px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07)}
.mobile-home .channel-target-title{color:rgba(255,255,255,.8)}
.mobile-home .channel-target .channel-target-options{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mobile-home .channel-target .channel-target-options button{color:rgba(255,255,255,.72)}
.mobile-home .channel-target .channel-target-options button:hover{background:rgba(255,255,255,.12);color:#fff}
.mobile-home .channel-target .channel-target-options button[aria-pressed=true]{background:#fff;color:var(--m-violet-deep)}
.mobile-home>*{flex-shrink:0}
.mobile-home-account{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:6px}
.mobile-home-account button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:14px;cursor:pointer;transition:transform .2s,background .2s}
.mobile-home-account button:active{transform:scale(.96);background:rgba(255,255,255,.14)}
.mobile-home-account button svg{width:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mobile-home-account .danger{color:#ffb3cb;border-color:rgba(255,140,180,.28);background:rgba(184,50,95,.18)}
/* Illustration motion */
.mh-art .f{fill:rgba(255,255,255,.22);stroke:none}
.mh-art :is(g,path,rect,circle,ellipse){transform-box:fill-box;transform-origin:center}
.mh-float{animation:mh-bob 3.4s ease-in-out infinite}
.mh-eq path{transform-origin:center bottom;animation:mh-eq 1.1s ease-in-out infinite}.mh-eq .b2{animation-delay:.18s}.mh-eq .b3{animation-delay:.36s}
.mh-twinkle{fill:#fff;stroke:none;animation:mh-twinkle 2.2s ease-in-out infinite}
.mh-lid{transform-origin:right bottom!important;animation:mh-lid 3.2s ease-in-out infinite}
.mh-drop{animation:mh-drop 3.2s ease-in infinite}
.mh-pop{animation:mh-pop 2.8s ease-in-out infinite}.mh-pop.p2{animation-delay:.25s}.mh-pop.p3{animation-delay:.5s}.mh-pop.p4{animation-delay:.75s}
.mh-type{stroke-dasharray:20;animation:mh-type 2.6s ease-in-out infinite}.mh-type.t2{animation-delay:.35s}
.mh-spin-slow{animation:maintenance-spin 8s linear infinite}
.mh-wave{animation:mh-wave 1.8s ease-out infinite}.mh-wave.w2{animation-delay:.4s}
.mh-needle{transform-origin:left bottom!important;animation:mh-needle 3s ease-in-out infinite}
.mh-bob{animation:mh-bob 2.4s ease-in-out infinite}.mh-bob.b2{animation-delay:.6s}
.mh-check{stroke-dasharray:14;animation:mh-check 2.8s ease-in-out infinite}
.mh-scan{animation:mh-scan 3s ease-in-out infinite}
.mh-grow{transform-origin:center bottom!important;animation:mh-grow 2.6s ease-in-out infinite}.mh-grow.g2{animation-delay:.15s}.mh-grow.g3{animation-delay:.3s}.mh-grow.g4{animation-delay:.45s}
.mh-line{stroke-dasharray:44;animation:mh-type 2.6s ease-in-out infinite}
.mh-gear{animation:maintenance-spin 7s linear infinite}.mh-gear-r{animation:maintenance-spin 4s linear infinite reverse}
.mh-pulse{fill:none;stroke:rgba(255,255,255,.5);animation:mh-pulse 2s ease-out infinite}
.mh-disk{animation:mh-bob 2.6s ease-in-out infinite}.mh-disk.d2{animation-delay:.2s}.mh-disk.d3{animation-delay:.4s}.mh-disk.d4{animation-delay:.6s}
/* Bottom bar: the current tab draws its icon in. */
.mobile-app-nav button.nav-current svg :is(path,rect){stroke-dasharray:90;animation:mh-draw .7s var(--m-ease)}
@keyframes mh-fade{from{opacity:0}}
@keyframes mh-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes mh-tile{from{opacity:0;transform:translateY(22px) scale(.94)}}
@keyframes mh-twinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:.85;transform:scale(1.1)}}
@keyframes mh-planet{50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes mh-shoot{0%{opacity:0;transform:translate(420px,40px) rotate(160deg)}4%{opacity:1}14%,100%{opacity:0;transform:translate(120px,150px) rotate(160deg)}}
@keyframes mh-drift{to{transform:translate(40px,60px) scale(1.15)}}
@keyframes mh-text{50%{background-position:100% 0}}
@keyframes mh-ping{0%{box-shadow:0 0 0 0 rgba(141,230,214,.6)}100%{box-shadow:0 0 0 10px rgba(141,230,214,0)}}
@keyframes mh-nudge{50%{transform:translateX(-3px)}}
@keyframes mh-bob{50%{transform:translateY(-3px)}}
@keyframes mh-eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.15)}}
@keyframes mh-lid{0%,20%,100%{transform:rotate(0)}40%,60%{transform:rotate(-16deg) translateY(-2px)}}
@keyframes mh-drop{0%,25%{opacity:0;transform:translateY(-6px)}45%{opacity:1}70%,100%{opacity:0;transform:translateY(16px)}}
@keyframes mh-pop{0%,60%,100%{transform:scale(1)}20%{transform:scale(.8)}35%{transform:scale(1.08)}}
@keyframes mh-type{0%{stroke-dashoffset:20}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-20}}
@keyframes mh-wave{0%{opacity:0;transform:translateX(-3px)}40%{opacity:1}100%{opacity:0;transform:translateX(3px)}}
@keyframes mh-needle{0%,100%{transform:rotate(-80deg)}50%{transform:rotate(5deg)}}
@keyframes mh-check{0%,15%{stroke-dashoffset:14}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:14}}
@keyframes mh-scan{0%,100%{transform:translate(0,0)}33%{transform:translate(-6px,-8px)}66%{transform:translate(-2px,-14px)}}
@keyframes mh-grow{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
@keyframes mh-pulse{0%{opacity:.8;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
@keyframes mh-draw{from{stroke-dashoffset:90}}
.low-power .mobile-home-sky :is(circle,g,path,span),.low-power .mh-art *{animation:none!important}
@media(prefers-reduced-motion:reduce){.mobile-home,.mobile-home *,.mobile-home *::before,.mobile-home *::after{animation:none!important}.mobile-app-nav button.nav-current svg *{animation:none!important}}

/* ---- Mobile menu v4: colourful tiles, flat icons, today's allowance ------------------------ */
.tone-violet{--tile:linear-gradient(145deg,#7c5cff 0%,#9d4edd 100%);--ink:#4b2aa8}
.tone-teal{--tile:linear-gradient(145deg,#19c2ac 0%,#0e8a9a 100%);--ink:#08646f}
.tone-peach{--tile:linear-gradient(145deg,#ffa25f 0%,#ff6f7d 100%);--ink:#c2434f}
.tone-blue{--tile:linear-gradient(145deg,#4c8dff 0%,#6a5cff 100%);--ink:#2b4fc4}
.tone-rose{--tile:linear-gradient(145deg,#ff74b1 0%,#c73fc7 100%);--ink:#9b2585}
.tone-plum{--tile:linear-gradient(145deg,#b05cff 0%,#ff5fa2 100%);--ink:#7d2fb8;--badge:linear-gradient(140deg,#9b4dff,#ff5fa2);--shadow:rgba(176,92,255,.85);--glow:rgba(255,95,162,.35)}
.tone-amber{--tile:linear-gradient(145deg,#ffc23d 0%,#ff8a2b 100%);--ink:#b25a07;--badge:linear-gradient(140deg,#ffb12b,#ff7a2b);--shadow:rgba(255,138,43,.8);--glow:rgba(255,194,61,.35)}
.tone-green{--tile:linear-gradient(145deg,#34d399 0%,#0ea5a0 100%);--ink:#06705e;--badge:linear-gradient(140deg,#22c58b,#0ea5a0);--shadow:rgba(14,165,160,.8);--glow:rgba(52,211,153,.35)}
.tone-night{--tile:linear-gradient(145deg,#5a3d8c,#2c1842);--ink:#2c1842}
.mh-art.flat{stroke:none!important;overflow:visible}
.mh-art.flat .w{fill:#fff}.mh-art.flat .t{fill:rgba(255,255,255,.58)}.mh-art.flat .y{fill:#ffd35c}.mh-art.flat .i{fill:var(--ink,#4b2aa8)}.mh-art.flat .i.o{fill:var(--ink,#4b2aa8);opacity:.28}.mh-art.flat .d{fill:rgba(0,0,0,.14)}
.mh-art.flat .ys{fill:none;stroke:#ffd35c!important;stroke-width:3.4;stroke-linecap:round}
.mh-art.flat .ic{fill:none;stroke:var(--ink,#4b2aa8)!important;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.mh-art.flat :is(g,rect,path,circle,ellipse){transform-box:fill-box;transform-origin:center}
.fl-float{animation:fl-float 3.6s ease-in-out infinite}
.fl-twinkle{animation:fl-twinkle 2.4s ease-in-out infinite}
.fl-eq{transform-origin:50% 100%!important;animation:fl-eq 1.1s ease-in-out infinite alternate}.fl-eq.e2{animation-delay:.25s}.fl-eq.e3{animation-delay:.5s}
.fl-pop{animation:fl-pop 3s ease-in-out infinite}.fl-pop.p2{animation-delay:.3s}.fl-pop.p3{animation-delay:.6s}.fl-pop.p4{animation-delay:.9s}
.fl-type{transform-origin:100% 50%!important;animation:fl-type 2.8s ease-in-out infinite}.fl-type.t2{animation-delay:.4s}
.fl-spin{animation:fl-spin 12s linear infinite}
.fl-drop{animation:fl-drop 2.6s cubic-bezier(.5,0,.3,1) infinite}
.fl-lid{transform-origin:100% 100%!important;animation:fl-lid 2.6s ease-in-out infinite}
.fl-wave{animation:fl-wave 1.8s ease-in-out infinite}.fl-wave.w2{animation-delay:.3s}
.fl-needle{transform-origin:0% 100%!important;animation:fl-needle 3.4s ease-in-out infinite}
.fl-bob{animation:fl-float 3s ease-in-out infinite}.fl-bob.b2{animation-delay:.5s}
.fl-check{stroke-dasharray:22;animation:fl-check 2.8s ease-in-out infinite}
.fl-scan{animation:fl-scan 3.2s ease-in-out infinite}
.fl-grow{transform-origin:50% 100%!important;animation:fl-grow 2.6s ease-in-out infinite}.fl-grow.g2{animation-delay:.15s}.fl-grow.g3{animation-delay:.3s}.fl-grow.g4{animation-delay:.45s}
.fl-gear{animation:fl-spin 9s linear infinite}
.fl-pulse{stroke-dasharray:60;animation:fl-check 2.4s linear infinite}
@keyframes fl-float{50%{transform:translateY(-3px)}}
@keyframes fl-twinkle{0%,100%{opacity:.35;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
@keyframes fl-eq{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@keyframes fl-pop{0%,62%,100%{transform:scale(1)}22%{transform:scale(.84)}38%{transform:scale(1.08)}}
@keyframes fl-type{0%{transform:scaleX(.2)}45%,85%{transform:scaleX(1)}100%{transform:scaleX(.2)}}
@keyframes fl-spin{to{transform:rotate(360deg)}}
@keyframes fl-drop{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}60%,100%{transform:translateY(5px);opacity:1}}
@keyframes fl-lid{0%,55%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}}
@keyframes fl-wave{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes fl-needle{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(8deg)}}
@keyframes fl-check{0%{stroke-dashoffset:22}40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-22}}
@keyframes fl-scan{0%,100%{transform:translate(0,0)}50%{transform:translate(-4px,-3px)}}
@keyframes fl-grow{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}

/* Tiles: each section in its own bright colour, softly moving. */
.mobile-home-grid:not(.compact) .mobile-home-tile:not([data-home-view=studio]),.mobile-home-grid.compact .mobile-home-tile{border:0;background:var(--tile);background-size:170% 170%;
  box-shadow:0 20px 34px -22px var(--shadow,rgba(0,0,0,.7)),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -14px 26px -18px rgba(0,0,0,.35);
  animation:mh-tile .62s calc(var(--i,0) * 70ms + 140ms) cubic-bezier(.2,.9,.25,1.2) both,m-flow 9s calc(var(--i,0) * -1.3s) ease-in-out infinite alternate}
.mobile-home-tile::before{background:radial-gradient(circle,rgba(255,255,255,.42),transparent 68%)!important;opacity:.55}
.mobile-home-tile .mh-shine{position:absolute;inset:-30% auto -30% -60%;z-index:-1;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-20deg);animation:mh-shine 6s calc(var(--i,0) * .7s + 1.4s) ease-in-out infinite;pointer-events:none}
@keyframes mh-shine{0%,70%{left:-60%}100%{left:130%}}
.mobile-home-tile small{color:rgba(255,255,255,.88)}
.mobile-home-grid.compact .mobile-home-tile small{color:rgba(255,255,255,.82)}
.mobile-home-tile .mobile-home-icon{background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 12px 22px -14px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mobile-home-tile .mobile-home-icon .mh-art{width:46px;height:46px}
.mobile-home-grid.compact .mobile-home-icon .mh-art{width:36px;height:36px}
.mobile-home-tile:active{transform:scale(.95)}
.mobile-home-tile:active .mobile-home-icon{transform:rotate(-10deg) scale(1.12)}
.mobile-home-grid:not(.compact) .mobile-home-tile[data-home-view=studio]{--ink:#4b2aa8}

/* Today's allowance */
.mobile-home-usage{position:relative;display:grid;gap:10px;width:100%;padding:14px 16px;border-radius:24px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  color:#fff;font:inherit;text-align:right;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:mh-rise .5s .08s var(--m-ease) both!important;-webkit-tap-highlight-color:transparent}
.mobile-home-usage[hidden],.sidebar-usage[hidden]{display:none!important}
.mobile-home-usage.clickable{cursor:pointer}.mobile-home-usage.clickable:active{transform:scale(.98)}
.usage-glance-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.usage-glance-head b{font-size:14px;font-weight:800}
.usage-glance-head small{font-size:11.5px;color:rgba(255,255,255,.7)}
.glance-meter{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px}
.glance-meter b{font-size:12.5px;font-weight:700}
.glance-meter em{justify-self:end;font-style:normal;font-size:12px;color:rgba(255,255,255,.85)}
.glance-meter i{grid-column:1/-1;height:8px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.glance-meter i s{display:block;width:var(--w,0%);height:100%;border-radius:inherit;background:var(--tile);background-size:200% 100%;animation:usage-fill 1.1s .3s cubic-bezier(.2,.9,.25,1) both,m-flow 4s ease-in-out infinite alternate}
.glance-meter.free i s{width:100%;opacity:.45}
.glance-meter.high em{color:#ffd35c}.glance-meter.full em{color:#ff9aa8;font-weight:800}
@keyframes usage-fill{from{width:0}}
.usage-glance-go{position:absolute;top:14px;inset-inline-end:auto;left:14px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 6-6 6 6 6'/%3E%3C/svg%3E") center/12px no-repeat;display:none}
.mobile-home-usage.clickable .usage-glance-head{padding-left:28px}.mobile-home-usage.clickable .usage-glance-go{display:block}
/* the same, small, in the desktop sidebar */
.sidebar-usage{display:grid;gap:8px;width:100%;margin:6px 0 10px;padding:12px 13px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font:inherit;text-align:right;cursor:default}
.sidebar-usage.clickable{cursor:pointer}.sidebar-usage.clickable:hover{background:rgba(255,255,255,.1)}
.sidebar-usage .usage-glance-head b{font-size:12px}.sidebar-usage .usage-glance-head small{font-size:10px}
.sidebar-usage .glance-meter b,.sidebar-usage .glance-meter em{font-size:11px}.sidebar-usage .glance-meter i{height:6px}

/* Sidebar: flat coloured badges like the home tiles */
.nav-item .nav-icon.flat-badge{background:var(--tile)!important;background-size:160% 160%!important;box-shadow:0 8px 16px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.nav-item .nav-icon.flat-badge .mh-art{width:24px;height:24px}
.nav-item .nav-icon.flat-badge .mh-art *{animation-play-state:paused}
.nav-item:hover .nav-icon.flat-badge .mh-art *,.nav-item.active .nav-icon.flat-badge .mh-art *{animation-play-state:running}
.nav-item:hover .nav-icon.flat-badge{transform:rotate(-6deg) scale(1.06)}
.nav-item.active .nav-icon.flat-badge{animation:m-flow 6s ease-in-out infinite alternate;box-shadow:0 10px 20px -8px var(--shadow,rgba(85,53,179,.6))}
@media(prefers-reduced-motion:reduce){.mh-art.flat *,.mobile-home-tile,.mobile-home-tile .mh-shine,.glance-meter i s,.nav-item .nav-icon.flat-badge{animation:none!important}}
.mh-art.flat .ic.thin{stroke-width:2.2}
/* Bottom bar: each destination has its colour; the pill wears it */
.tone-home{--tile:linear-gradient(145deg,#6545cf,#b73e83 66%,#149482);--ink:#5535b3}
.mobile-nav-indicator{background:var(--pill,linear-gradient(145deg,#6545cf,#b73e83 66%,#149482))!important;background-size:170% 170%!important;transition:transform .55s cubic-bezier(.34,1.45,.5,1),width .35s var(--m-ease),opacity .3s,background .4s}
.mobile-app-nav button:not(.nav-current) svg{color:var(--ink,#5535b3);opacity:.78}
.mobile-app-nav button:not(.nav-current) span{color:#5c5470}
.mobile-app-nav button:active svg{transform:scale(.88)}
.mobile-app-nav button svg{transition:transform .25s cubic-bezier(.34,1.6,.5,1)}

/* ---- Mobile menu v5: the same night sky, less clutter, smoother motion ------------
   Approved from a mockup (2026-10-16). Twinkling stars and soft lights stay; the
   planet and shooting star go. A breathing halo replaces the dashed ring around
   the avatar. Today's allowance shows its meters side by side. Tiles are their
   own button (no arrow circles), so each hint fits one line. The menu rises in,
   tiles spring in one by one, and a pressed tile dips with its icon turning. */
.mh-planet,.mh-shoot{display:none!important}
.mh-aurora{opacity:.5}
.mobile-home-avatar::before{inset:-6px;border:0;background:radial-gradient(circle,rgba(141,230,214,.45),transparent 68%);animation:mh-breathe 3.2s ease-in-out infinite}
.mobile-home-avatar::after{content:none}
@keyframes mh-breathe{50%{transform:scale(1.18);opacity:.55}}
.mobile-home-hero strong{font-size:26px}
.mobile-home-usage{grid-template-columns:1fr 1fr;column-gap:16px;padding:12px 14px}
.mobile-home-usage .usage-glance-head{grid-column:1/-1}
.mobile-home-tile{min-height:132px;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.mobile-home-tile::after{display:none}
.mobile-home-tile small{padding-inline-end:0}
.mobile-home-grid:not(.compact) .mobile-home-tile[data-home-view=studio]::after{display:block}
.mobile-home{animation:mh-open .45s cubic-bezier(.2,.9,.25,1) both}
@keyframes mh-open{from{opacity:0;transform:translateY(24px) scale(.98)}}
.mobile-home-grid:not(.compact) .mobile-home-tile:not([data-home-view=studio]),.mobile-home-grid.compact .mobile-home-tile{animation:mh-spring .7s calc(var(--i,0) * 75ms + 180ms) cubic-bezier(.22,1.4,.36,1) both,m-flow 10s ease-in-out infinite alternate}
@keyframes mh-spring{from{opacity:0;transform:translateY(30px) scale(.88) rotate(-2deg)}}
.mobile-home-tile:active{transform:scale(.93)}
.mobile-home-tile:active .mobile-home-icon{transform:rotate(-10deg) scale(1.15)}
@media(prefers-reduced-motion:reduce){.mobile-home,.mobile-home-tile,.mobile-home-avatar::before{animation:none!important;transition:none!important}}

/* ---- «ساخت گروهی» (group work) ------------------------------------------- */
.batch-view{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:780px;margin:0 auto}
.batch-view>*{min-width:0}
.batch-view svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.batch-hero{position:relative;isolation:isolate;padding:24px 28px;border-radius:28px;overflow:hidden;color:#fff;background:var(--m-night);box-shadow:0 26px 60px -30px rgba(40,20,80,.6)}
.batch-hero::after{content:"";position:absolute;z-index:-1;width:300px;height:300px;left:-90px;bottom:-190px;border-radius:50%;background:radial-gradient(circle,rgba(222,108,170,.34),transparent 64%);animation:m-drift 16s ease-in-out infinite alternate}
.batch-hero .tools-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:12.5px}
.batch-hero .tools-eyebrow svg{width:16px;height:16px}
.batch-hero h1{margin:10px 0 4px;font-size:clamp(24px,3vw,34px);font-weight:900;letter-spacing:-.02em;background:linear-gradient(90deg,#fff 0%,#ffd6b8 45%,#f7a8c8 70%,#9fe6d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.batch-hero p{margin:0;color:rgba(255,255,255,.84);font-size:14px;line-height:1.95}
.batch-hero p:empty{display:none}
.batch-card{padding:14px 16px;border-radius:22px;background:#fff;box-shadow:var(--m-shadow)}
.batch-card h3{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:15px;font-weight:800;color:var(--m-ink)}
.batch-card h3 em{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--m-grad);color:#fff;font-style:normal;font-size:12.5px}
.batch-notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:18px;background:var(--m-peach-soft);color:#7a4410;font-size:13px;line-height:1.85;box-shadow:0 0 0 1px rgba(214,138,60,.25)}
.batch-notice b{color:#5c300a}
.batch-notice svg{flex:none;width:28px;height:28px;padding:5px;border-radius:10px;background:#f2a36b;color:#fff}
.batch-capacity{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;background:linear-gradient(140deg,#eef0ff,#f6ecff)}
.batch-capacity b{flex:none;font-size:30px;font-weight:900;background:var(--m-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.batch-capacity small{font-size:12.5px;color:var(--m-muted);line-height:1.8}
.batch-blocker{margin:0;padding:14px 16px;border-radius:18px;background:#fde8ec;color:#9b2238;font-size:14px;line-height:1.9}
.batch-last{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:18px;background:var(--m-teal-soft);color:#0d6a60}
.batch-last svg{flex:none;width:22px;height:22px}
.batch-last b{display:block;font-size:13px}.batch-last small{font-size:12px;line-height:1.7}
.batch-muted{margin:8px 0 0;font-size:12px;color:var(--m-muted);line-height:1.8}
.batch-muted.center{text-align:center}
.batch-templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px}
.batch-template{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--m-line);cursor:pointer;font:inherit;transition:transform .3s var(--m-ease),box-shadow .3s}
.batch-template img{display:block;width:100%;height:70px;object-fit:cover}
.batch-template small{display:block;padding:6px 8px;font-size:12px;text-align:center;color:var(--m-ink)}
.batch-template.on{box-shadow:0 0 0 2.5px var(--m-violet),0 14px 26px -16px rgba(85,53,179,.6)}
.batch-template.on::after{content:"✓";position:absolute;top:7px;left:7px;width:22px;height:22px;border-radius:50%;background:var(--m-violet);color:#fff;font-size:13px;display:grid;place-items:center;animation:batch-pop .35s var(--m-ease)}
@media(hover:hover){.batch-template:hover{transform:translateY(-2px)}}
.batch-fields{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}
.batch-fields label,.batch-rc label{display:grid;gap:4px}
.batch-fields small,.batch-rc label small{font-size:11.5px;color:var(--m-muted)}
.batch-fields input,.batch-rc input,.batch-rc textarea{width:100%;min-width:0;padding:9px 12px;border:1px solid var(--m-line);border-radius:13px;background:#fbfafd;font:inherit;font-size:14px;color:var(--m-ink)}
.batch-fields input:focus,.batch-rc input:focus,.batch-rc textarea:focus{outline:2px solid rgba(106,75,212,.35);border-color:var(--m-violet)}
.batch-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.batch-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:#f1eef5;color:#77708a;cursor:pointer;transition:background .25s,color .25s}
.batch-chip input{position:absolute;opacity:0;pointer-events:none}
.batch-chip.on{background:var(--m-violet-soft);color:#4b2aa8}
.batch-chip.on::after{content:"✓"}
.batch-chip.fixed{background:var(--m-teal-soft);color:#0d6a60;cursor:default}
.batch-chip:has(input:focus-visible){outline:2px solid var(--m-violet)}
.batch-modes{display:grid;gap:8px}
.batch-mode{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:18px;border:1.5px solid var(--m-line);cursor:pointer;transition:border-color .25s,background .25s}
.batch-mode input{position:absolute;opacity:0;pointer-events:none}
.batch-mode i{flex:none;width:19px;height:19px;margin-top:3px;border-radius:50%;border:2px solid #b9add2;transition:border .25s}
.batch-mode.on{border-color:var(--m-violet);background:#f6f2ff}
.batch-mode.on i{border:5.5px solid var(--m-violet)}
.batch-mode b{display:block;font-size:14px;color:var(--m-ink)}
.batch-mode b em{font-style:normal;font-size:11px;padding:2px 8px;border-radius:999px;background:var(--m-teal);color:#fff;margin-right:5px}
.batch-mode small{display:block;font-size:12px;line-height:1.75;color:var(--m-muted)}
.batch-mode:has(input:focus-visible){outline:2px solid var(--m-violet)}
.batch-cta{position:sticky;bottom:12px;z-index:3;width:100%;padding:15px;border:0;border-radius:18px;font:inherit;font-weight:800;font-size:15.5px;color:#fff;background:var(--m-grad);background-size:160% 100%;box-shadow:0 14px 26px -12px rgba(85,53,179,.7);cursor:pointer;transition:background-position .6s var(--m-ease),transform .2s}
.batch-cta.static{position:static}
.batch-cta:hover:not(:disabled){background-position:100% 0}
.batch-cta:active:not(:disabled){transform:scale(.98)}
.batch-cta:disabled{opacity:.5;cursor:not-allowed}
.batch-channel{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:20px;background:linear-gradient(140deg,#e9f7f4,#f1ecff)}
.batch-channel b{display:block;font-size:14.5px;color:var(--m-ink)}
.batch-channel small{display:block;font-size:12.5px;color:var(--m-muted);line-height:1.85}
.batch-channel-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:linear-gradient(140deg,#2bb8a3,#16877d);color:#fff;animation:batch-bob 2.6s ease-in-out infinite}
.batch-channel-icon svg{width:22px;height:22px}
.batch-small{margin-top:8px;padding:8px 14px;border:0;border-radius:12px;font:inherit;font-size:12.5px;font-weight:800;color:#0d6a60;background:#fff;box-shadow:0 0 0 1px rgba(22,135,125,.3);cursor:pointer}
.batch-count{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:4px 12px}
.batch-count>div small{font-size:12px;color:var(--m-muted)}
.batch-count b{display:block;font-size:30px;font-weight:900;line-height:1.3;background:var(--m-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.batch-count b span{font-size:16px;font-weight:700;margin:0 3px}
.batch-count b .batch-waiting{font-size:19px;margin:0}
.batch-count>small{justify-self:end;text-align:left;font-size:12px;color:var(--m-muted);line-height:1.7}
.batch-bar{grid-column:1/-1;display:block;height:9px;margin-top:6px;border-radius:99px;background:#efeaf7;overflow:hidden}
.batch-bar s{display:block;height:100%;border-radius:inherit;background:var(--m-grad);background-size:200% 100%;transition:width .8s var(--m-ease);animation:batch-flow 3s linear infinite}
.batch-log{padding:10px 13px;border-radius:15px;background:#dcf6ec;color:#06705e;font-size:13px;font-weight:700;line-height:1.8;animation:batch-in .45s var(--m-ease)}
.batch-log.err{background:#fde8ec;color:#9b2238}
.batch-feed{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.batch-feed li{display:flex;gap:9px;align-items:baseline;padding:9px 13px;border-radius:15px;background:var(--m-violet-soft);color:#4b2aa8;font-size:13px;font-weight:700;line-height:1.8}
.batch-feed li.fresh{animation:batch-in .45s var(--m-ease)}
.batch-feed li.in{background:#e6f1ff;color:#1f4f9c}
.batch-feed li:first-child:not(.err):not(.in){background:#dcf6ec;color:#06705e}
.batch-feed li.err{background:#fde8ec;color:#9b2238}
.batch-feed li.old{padding:5px 13px;font-size:12px;font-weight:500;opacity:.78}
.batch-feed time{flex:none;font-size:11px;font-weight:500;opacity:.75;font-variant-numeric:tabular-nums}
.batch-source b{display:flex;align-items:center;gap:6px}
.batch-source b svg{width:17px;height:17px;flex:none;color:var(--m-violet)}
.batch-files{display:grid;gap:8px;margin-top:10px}
.batch-pick{position:relative;display:inline-flex;align-items:center;justify-content:center;justify-self:start;cursor:pointer}
.batch-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.batch-pick:has(input:focus-visible){outline:2px solid var(--m-violet)}
.batch-file-list{margin:0;padding:0;list-style:none;display:grid;gap:5px;max-height:260px;overflow:auto}
.batch-file-list li{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 4px;border-radius:12px;background:#f7f5fb;font-size:12.5px;color:var(--m-ink)}
.batch-file-list li>span{flex:none;color:var(--m-muted);font-variant-numeric:tabular-nums}
.batch-file-list bdi{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.batch-file-list small{flex:none;color:var(--m-muted);font-size:11px}
.batch-file-list button{flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:8px;background:transparent;color:#a3243b;cursor:pointer}
.batch-file-list button svg{width:15px;height:15px}
.batch-file-list li.over{opacity:.45}
.batch-upload .batch-bar{margin:8px 0 4px}
.batch-upload .batch-act{margin-top:8px}
.batch-upload .batch-small{margin-top:0}
.batch-items{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.batch-item{display:flex;gap:11px;align-items:center;padding:9px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--m-line)}
.batch-item.fresh{animation:batch-in .4s var(--m-ease) both}
.batch-item img,.batch-ph,.batch-rc img{flex:none;width:50px;height:50px;border-radius:12px;object-fit:cover;background:#efeaf7}
.batch-ph{display:grid;place-items:center;color:#9a8fb3}
.batch-ph svg{width:22px;height:22px}
.batch-item.run .batch-ph{color:var(--m-violet);animation:batch-pulse 1.6s ease-in-out infinite}
.batch-item>div{flex:1;min-width:0}
.batch-item b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--m-ink)}
.batch-item small{display:block;font-size:11.5px;color:var(--m-muted);line-height:1.7}
.batch-st{flex:none;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;white-space:nowrap}
.batch-st.ok{background:#dcf6ec;color:#06705e}.batch-st.run{background:#efe9ff;color:#4b2aa8}.batch-st.wait{background:#f1eef5;color:#77708a}.batch-st.err{background:#fde8ec;color:#b3263f}
.batch-pause{padding:16px 18px;border-radius:22px;color:#fff;background:linear-gradient(150deg,#3a2257,#22304a);animation:batch-in .45s var(--m-ease)}
.batch-pause h4{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:16.5px}
.batch-pause h4 svg{width:20px;height:20px}
.batch-pause p{margin:0;font-size:13px;line-height:1.95;color:rgba(255,255,255,.86)}
.batch-when{display:inline-block;margin-top:10px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:12.5px;font-weight:700}
.batch-buttons{display:flex;gap:8px}
.batch-buttons button{flex:1;padding:12px;border:0;border-radius:15px;font:inherit;font-size:13.5px;font-weight:800;background:var(--m-violet-soft);color:var(--m-violet-deep);cursor:pointer}
.batch-buttons button.danger{background:#fdf0f2;color:#a3243b}
.batch-buttons button:disabled,.batch-act button:disabled,.batch-small:disabled{opacity:.5;cursor:not-allowed}
.batch-review{display:grid;gap:10px}
.batch-rc{display:flex;gap:12px;padding:11px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--m-line);animation:batch-in .4s var(--m-ease) both}
.batch-rc img,.batch-rc .batch-ph{width:92px;height:92px;border-radius:14px}
.batch-rc>div{flex:1;min-width:0;display:grid;gap:6px;align-content:start}
.batch-rc b{font-size:14px;color:var(--m-ink)}
.batch-rc p{margin:0;font-size:12.5px;line-height:1.8;color:#4a4060;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.batch-rc.editing{box-shadow:0 0 0 2px var(--m-violet)}
.batch-rc textarea{resize:vertical;line-height:1.8}
.batch-act{display:flex;flex-wrap:wrap;gap:6px}
.batch-act button{padding:6px 12px;border:0;border-radius:999px;font:inherit;font-size:12px;font-weight:700;background:#f3effa;color:var(--m-violet-deep);cursor:pointer}
.batch-act button.primary{background:var(--m-grad);color:#fff}
.batch-history{padding:10px 14px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--m-line);font-size:12.5px}
.batch-history summary{cursor:pointer;font-weight:800;color:var(--m-violet-deep)}
.batch-history ol{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px;max-height:280px;overflow:auto}
.batch-history li{display:flex;gap:8px;line-height:1.75;color:#4a4060}
.batch-history time{flex:none;color:var(--m-subtle);font-variant-numeric:tabular-nums}
@keyframes batch-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes batch-pop{from{transform:scale(.4)}to{transform:scale(1)}}
@keyframes batch-bob{50%{transform:translateY(-3px) rotate(-6deg)}}
@keyframes batch-pulse{50%{transform:scale(.92);opacity:.7}}
@keyframes batch-flow{to{background-position:-200% 0}}
@media(max-width:650px){
  .batch-hero{padding:18px 18px;border-radius:24px}
  .batch-fields{grid-template-columns:1fr}
  .batch-count{grid-template-columns:1fr}.batch-count>small{justify-self:start;text-align:right}
  .batch-rc img,.batch-rc .batch-ph{width:72px;height:72px}
  .batch-cta{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .batch-hero::after,.batch-channel-icon,.batch-item,.batch-item.run .batch-ph,.batch-bar s,.batch-log,.batch-feed li,.batch-pause,.batch-rc,.batch-template.on::after{animation:none!important}
}

/* ---- «ساخت گروهی»: progress (ring, steps, voice in focus, rows) ----------- */
.bp-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;align-items:center;padding:16px 18px;border-radius:28px;color:#fff;background:var(--m-night);box-shadow:0 24px 48px -28px rgba(40,20,80,.7);overflow:hidden}
.bp-hero::after{content:"";position:absolute;z-index:-1;width:240px;height:240px;left:-90px;bottom:-150px;border-radius:50%;background:radial-gradient(circle,rgba(222,108,170,.35),transparent 64%);animation:m-drift 16s ease-in-out infinite alternate}
.bp-ring{position:relative;width:118px;height:118px}
.bp-ring svg{width:118px;height:118px;transform:rotate(-90deg)}
.bp-ring .track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:10}
.bp-ring .val{fill:none;stroke:url(#bp-grad);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1s var(--m-ease);filter:drop-shadow(0 0 6px rgba(159,230,216,.5))}
.bp-ring .spin{fill:none;stroke:rgba(255,255,255,.8);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:10 329;transform-box:fill-box;transform-origin:center;animation:bp-spin 2.6s linear infinite}
.bp-ring>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center}
.bp-ring b{font-size:30px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.bp-ring small{font-size:10.5px;color:rgba(255,255,255,.72)}
.bp-hero-copy{min-width:0}
.bp-hero h2{margin:0 0 6px;font-size:17px;font-weight:900;line-height:1.6;background:linear-gradient(90deg,#fff,#ffd6b8 50%,#9fe6d8);-webkit-background-clip:text;background-clip:text;color:transparent}
.bp-hero p{margin:0;font-size:12.5px;color:rgba(255,255,255,.82)}
.bp-live{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;padding:3px 10px;border-radius:99px;background:rgba(159,230,216,.16);color:#9fe6d8;font-size:11px;font-weight:700}
.bp-live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:bp-beat 1.6s ease-in-out infinite}
.bp-live.still{background:rgba(255,214,184,.16);color:#ffd6b8}.bp-live.still i{animation:none}
.bp-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bp-stats div{padding:6px 9px;border-radius:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.bp-stats small{display:block;font-size:10.5px;color:rgba(255,255,255,.7)}
.bp-stats b{font-size:14px;font-variant-numeric:tabular-nums}
.bp-hero.done{grid-template-columns:1fr;justify-items:center;text-align:center;padding:22px 18px 18px}
.bp-hero.done .bp-ring .val{stroke-dashoffset:0}
.bp-confetti{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 20% 30%,#ffd6b8 0 2px,transparent 3px),radial-gradient(circle at 75% 20%,#9fe6d8 0 2px,transparent 3px),radial-gradient(circle at 60% 70%,#f7a8c8 0 2px,transparent 3px),radial-gradient(circle at 30% 80%,#c9b8ff 0 2px,transparent 3px),radial-gradient(circle at 88% 60%,#ffd6b8 0 1.5px,transparent 2.5px),radial-gradient(circle at 12% 55%,#9fe6d8 0 1.5px,transparent 2.5px);animation:bp-twinkle 2.4s ease-in-out infinite alternate}
.bp-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bp-sum div{padding:10px 6px;border-radius:16px;background:#fff;text-align:center;box-shadow:var(--m-shadow)}
.bp-sum b{display:block;font-size:19px;font-weight:900;background:var(--m-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.bp-sum small{font-size:11px;color:var(--m-muted)}
.bp-pipe{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:14px 6px 10px;border-radius:22px;background:#fff;box-shadow:var(--m-shadow)}
.bp-pipe::before,.bp-pipe::after{content:"";position:absolute;top:33px;right:10%;height:3px;border-radius:3px}
.bp-pipe::before{left:10%;background:#e6e0f1}
.bp-pipe::after{width:calc(80% * min(var(--done),4) / 4);background:linear-gradient(270deg,#2bb8a3,#16877d);transition:width .8s var(--m-ease)}
.bp-st{position:relative;z-index:1;display:grid;justify-items:center;gap:5px;text-align:center}
.bp-st span{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:#f1eef5;color:#9a8fb3;font-size:17px;transition:background .4s,color .4s,box-shadow .4s}
.bp-st b{font-size:11px;color:var(--m-muted);font-weight:700}
.bp-st em{position:absolute;top:-8px;left:calc(50% - 30px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#fff;color:#4b2aa8;font-style:normal;font-size:10px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 1.5px #c9b8ff}
.bp-st.done span{background:linear-gradient(140deg,#2bb8a3,#16877d);color:#fff}
.bp-st.done em{color:#0d6a60;box-shadow:0 0 0 1.5px #16877d}
.bp-st.wait span{background:#efe9ff;color:#6a4bd4}
.bp-st.on span{background:var(--m-grad);color:#fff;animation:bp-glow 1.8s ease-in-out infinite}
.bp-st.on b{color:#4b2aa8}
.bp-st.on em{box-shadow:0 0 0 1.5px #7c5cff}
.bp-focus{position:relative;padding:14px;border-radius:22px;background:#fff;box-shadow:0 0 0 2px #7c5cff,0 18px 34px -20px rgba(85,53,179,.55);animation:batch-in .45s var(--m-ease)}
.bp-tag{position:absolute;top:-10px;right:14px;padding:2px 11px;border-radius:99px;background:var(--m-grad);color:#fff;font-size:11px;font-weight:800}
.bp-focus-head{display:flex;gap:11px;align-items:center}
.bp-focus-head img,.bp-focus-head .batch-ph{flex:none;width:50px;height:50px;border-radius:14px;object-fit:cover;background:#efe9ff;color:#6a4bd4}
.bp-focus-head>div{flex:1;min-width:0}
.bp-focus-head b{display:block;font-size:14px;color:var(--m-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-focus-head small{display:block;font-size:12px;line-height:1.7;color:var(--m-muted)}
.bp-focus-head strong{flex:none;font-size:23px;font-weight:900;background:var(--m-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.bp-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:11px}
.bp-steps i{position:relative;height:8px;border-radius:99px;background:#efeaf7;overflow:hidden}
.bp-steps i.d{background:linear-gradient(90deg,#2bb8a3,#16877d)}
.bp-steps i s{position:absolute;inset:0 0 0 auto;display:block;width:0;border-radius:inherit;background:repeating-linear-gradient(-45deg,#7c5cff 0 6px,#a07cff 6px 12px);background-size:34px 34px;animation:bp-stripes 1s linear infinite;transition:width 1s var(--m-ease)}
.bp-steps-l{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:4px;font-size:10px;color:var(--m-muted);text-align:center}
.bp-steps-l .a{color:#4b2aa8;font-weight:800}
.bp-times{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--m-line);font-size:11.5px;color:var(--m-muted)}
.bp-times b{color:var(--m-ink);font-variant-numeric:tabular-nums}
.bp-seg{padding:11px 13px;border-radius:20px;background:#fff;box-shadow:var(--m-shadow)}
.bp-seg-l{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px;font-size:11.5px;color:var(--m-muted)}
.bp-bars{display:flex;gap:3px}
.bp-bars i{flex:1;height:12px;border-radius:4px;background:#ece7f5;transition:background .5s}
.bp-bars i.s{background:linear-gradient(180deg,#2bb8a3,#16877d)}
.bp-bars i.w{background:repeating-linear-gradient(-45deg,#7c5cff 0 5px,#a07cff 5px 10px);background-size:28px 28px;animation:bp-stripes 1s linear infinite}
.bp-bars i.c{background:#c9b8ff}.bp-bars i.f{background:#f0a3b1}.bp-bars i.k{background:#f4f1f8;opacity:.5}
.bp-key{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:7px;font-size:10.5px;color:var(--m-muted)}
.bp-key span::before{content:"";display:inline-block;width:8px;height:8px;margin-left:4px;border-radius:2px;vertical-align:-1px;background:var(--c)}
.bp-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.bp-row{display:flex;min-width:0;gap:10px;align-items:center;padding:8px 10px 8px 8px;border-radius:17px;background:#fff;box-shadow:0 0 0 1px var(--m-line);transition:box-shadow .4s}
.bp-row.fresh{animation:batch-in .4s var(--m-ease) both}
.bp-row img,.bp-row .batch-ph{flex:none;width:46px;height:46px;border-radius:12px;object-fit:cover;background:#efeaf7}
.bp-row-m{flex:1;min-width:0}
.bp-row-m b{display:block;font-size:13px;color:var(--m-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-row-m small{display:block;font-size:11px;line-height:1.7;color:var(--m-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-dots{display:flex;gap:3px;margin-top:3px}
.bp-dots i{width:17px;height:4px;border-radius:2px;background:#e6e0f1;transition:background .4s}
.bp-dots i.d{background:#16a37f}.bp-dots i.a{background:#7c5cff;animation:bp-beat 1.4s ease-in-out infinite}.bp-dots i.f{background:#f0a3b1}
.bp-row-r{flex:none;min-width:52px;text-align:left;font-variant-numeric:tabular-nums}
.bp-row-r b{display:block;font-size:13.5px;font-weight:900;color:#4b2aa8}
.bp-row-r small{font-size:10.5px;color:var(--m-muted)}
.bp-row.on{box-shadow:0 0 0 2px #7c5cff}
.bp-row.ok .bp-row-r b{color:#06705e}
.bp-row.err{box-shadow:0 0 0 1px #f3c2cc}.bp-row.err .bp-row-m small,.bp-row.err .bp-row-r b{color:#b3263f}
.bp-row.just{animation:bp-done 1.4s var(--m-ease)}
.batch-feed li.warn{background:#fff6ec;color:#8a4b1d}
.bp-upload{padding:14px;border-radius:22px;background:linear-gradient(150deg,#fff,#f4efff);box-shadow:0 0 0 2px #7c5cff,0 18px 34px -20px rgba(85,53,179,.55)}
.bp-upload-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bp-upload-h b{min-width:0;font-size:14px;color:var(--m-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-upload-h strong{flex:none;font-size:20px;font-weight:900;color:#4b2aa8;font-variant-numeric:tabular-nums}
.bp-upload-bar{display:block;height:12px;margin:10px 0 7px;border-radius:99px;background:#ebe5f6;overflow:hidden}
.bp-upload-bar s{display:block;width:0;height:100%;margin-right:0;border-radius:inherit;background:linear-gradient(90deg,#16877d,#a23f7a,#6a4bd4);box-shadow:0 0 12px rgba(124,92,255,.5);transition:width .5s var(--m-ease)}
.bp-upload-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;font-size:11.5px;color:var(--m-muted);font-variant-numeric:tabular-nums}
.bp-keep{margin:10px 0 0;padding:8px 11px;border-radius:13px;background:#fff6ec;color:#7a4410;font-size:11.5px;line-height:1.75}
.bp-queue{margin:8px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.bp-queue li{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--m-line);font-size:12px}
.bp-queue li span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bp-queue li small{flex:none;font-size:10.5px;color:var(--m-muted)}
.bp-sticky{position:fixed;top:0;left:0;width:100%;max-width:100vw;z-index:30;display:flex;align-items:center;gap:10px;padding:8px 16px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 10px 22px -16px rgba(40,20,80,.5);transform:translateY(-130%);opacity:0;pointer-events:none;transition:transform .35s var(--m-ease),opacity .25s}
.bp-sticky:not(.show){visibility:hidden;transition:transform .35s var(--m-ease),opacity .25s,visibility 0s .35s}
.bp-sticky.show{transform:none;opacity:1}
.bp-mini{position:relative;flex:none;width:36px;height:36px}
.bp-mini svg{width:36px;height:36px;transform:rotate(-90deg)}
.bp-mini .track{fill:none;stroke:#ece7f5;stroke-width:4}
.bp-mini .val{fill:none;stroke:url(#bp-grad);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset 1s var(--m-ease)}
.bp-mini b{position:absolute;inset:0;display:grid;place-items:center;font-size:9.5px;font-weight:900;line-height:1;color:#4b2aa8;font-variant-numeric:tabular-nums}
.bp-sticky-text{flex:1;min-width:0}
.bp-sticky-text b{display:block;font-size:12.5px;color:var(--m-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-sticky-text small{display:block;font-size:10.5px;color:var(--m-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-mini-line{position:absolute;right:0;left:0;bottom:0;height:3px;background:#ece7f5}
.bp-mini-line s{display:block;width:0;height:100%;background:var(--m-grad);transition:width 1s var(--m-ease)}
@keyframes bp-spin{to{transform:rotate(1turn)}}
@keyframes bp-beat{50%{opacity:.45;transform:scale(.85)}}
@keyframes bp-glow{0%,100%{box-shadow:0 0 0 4px rgba(124,92,255,.16),0 10px 20px -8px rgba(85,53,179,.7)}50%{box-shadow:0 0 0 8px rgba(124,92,255,.06),0 10px 24px -8px rgba(85,53,179,.85)}}
@keyframes bp-stripes{to{background-position:-34px 0}}
@keyframes bp-twinkle{from{opacity:.55}to{opacity:1}}
@keyframes bp-done{0%{box-shadow:0 0 0 2px #7c5cff}40%{box-shadow:0 0 0 3px #2bb8a3,0 0 22px rgba(43,184,163,.45)}100%{box-shadow:0 0 0 1px var(--m-line)}}
@media(max-width:650px){
  .bp-hero{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:14px}
  .bp-ring,.bp-ring svg{width:104px;height:104px}
  .bp-ring b{font-size:26px}
  .bp-hero h2{font-size:15.5px}
  .bp-st span{width:36px;height:36px;font-size:15px}
  .bp-pipe::before,.bp-pipe::after{top:31px}
}
@media(prefers-reduced-motion:reduce){
  .bp-ring .spin,.bp-live i,.bp-st.on span,.bp-steps i s,.bp-bars i.w,.bp-dots i.a,.bp-row.just,.bp-row.fresh,.bp-focus,.bp-confetti,.bp-hero::after{animation:none!important}
  .bp-ring .val,.bp-mini .val,.bp-pipe::after,.bp-steps i s,.bp-upload-bar s,.bp-mini-line s,.bp-sticky{transition:none!important}
}

.batch-channel-pick{display:grid;gap:4px;margin-bottom:10px}
.batch-channel-pick small{font-size:11.5px;color:var(--m-muted)}
.batch-channel-pick select{width:100%;min-width:0;padding:9px 12px;border:1px solid var(--m-line);border-radius:13px;background:#fbfafd;font:inherit;font-size:16px;color:var(--m-ink)}
.batch-target{margin:0 0 10px}
.batch-target b{color:var(--m-ink)}