/* Demo Pay admin — premium layer (depth, light, motion). Loaded after admin-pro.css. */

/* ───────────── Cross-page transitions (no JS: browser keeps the shell, animates content) ───────────── */
@view-transition{navigation:auto}
.ap-side{view-transition-name:ap-side}
.ap-top{view-transition-name:ap-top}
.ap-tabbar{view-transition-name:ap-tabbar}
.ap-pill{view-transition-name:ap-pill}
.ap-tab-pill{view-transition-name:ap-tab-pill}
::view-transition-group(ap-side),::view-transition-group(ap-top),::view-transition-group(ap-tabbar){animation:none}
::view-transition-old(ap-side),::view-transition-new(ap-side),::view-transition-old(ap-top),::view-transition-new(ap-top),::view-transition-old(ap-tabbar),::view-transition-new(ap-tabbar){animation:none;mix-blend-mode:normal}
::view-transition-group(ap-pill),::view-transition-group(ap-tab-pill){animation-duration:.42s;animation-timing-function:cubic-bezier(.3,1.2,.4,1)}
::view-transition-old(root){animation:fx-vt-out .16s ease-in both}
::view-transition-new(root){animation:fx-vt-in .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-vt-out{to{opacity:0;filter:blur(2px)}}
@keyframes fx-vt-in{from{opacity:0;transform:translateY(8px);filter:blur(3px)}}

/* ───────────── Atmosphere ───────────── */
body.ap{background:transparent}
html:has(body.ap){background:#070708}
body.ap::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(900px 520px at 88% -12%,rgba(255,122,26,.13),transparent 62%),
   radial-gradient(700px 420px at 10% -8%,rgba(255,170,90,.05),transparent 60%),
   radial-gradient(1200px 700px at 50% 120%,rgba(91,120,255,.045),transparent 60%),
   #070708}
body.ap::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 45% at 70% 0%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 70% 45% at 70% 0%,#000 10%,transparent 70%)}
.ap-shell{position:relative;isolation:isolate}
.ap-shell::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ───────────── Sidebar ───────────── */
.ap-side{background:linear-gradient(180deg,rgba(18,18,21,.86),rgba(11,11,13,.92));backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-inline-end:1px solid rgba(255,255,255,.06)}
.ap-side::before{content:"";position:absolute;inset-block:0;inset-inline-end:-1px;width:1px;background:linear-gradient(180deg,transparent,rgba(255,122,26,.35) 18%,rgba(255,255,255,.06) 50%,transparent);pointer-events:none}
.ap-brand img{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 20px -6px rgba(255,122,26,.55)}
.ap-brand b{background:linear-gradient(90deg,#fff,#ffd2ad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ap-nav a{z-index:0;transition:color .2s,background .2s,transform .2s}
.ap-nav a:hover{background:rgba(255,255,255,.035);transform:translateX(-2px)}
.ap-nav a.active{background:transparent}
.ap-nav a.active::before{display:none}
.ap-pill{position:absolute;inset:0;z-index:-1;border-radius:9px;background:linear-gradient(270deg,rgba(255,122,26,.16),rgba(255,122,26,.03) 70%);box-shadow:inset 0 0 0 1px rgba(255,122,26,.22),0 8px 24px -14px rgba(255,122,26,.7)}
.ap-pill::before{content:"";position:absolute;inset-inline-start:-10px;top:8px;bottom:8px;width:3px;border-radius:3px 0 0 3px;background:linear-gradient(180deg,#ffb27a,#ff6a00);box-shadow:0 0 12px 1px rgba(255,122,26,.75)}
.ap-nav a.active .ap-i{color:#ff9a4d;filter:drop-shadow(0 0 6px rgba(255,122,26,.55))}
.ap-count{background:linear-gradient(180deg,#ff9a4d,#ff6a00);box-shadow:0 0 0 3px rgba(255,122,26,.12),0 4px 12px -2px rgba(255,106,0,.6)}
.ap-side-foot{background:rgba(255,255,255,.015)}
.ap-avatar{background:linear-gradient(150deg,#3a2a20,#1a1410);box-shadow:0 0 0 1px rgba(255,140,60,.28)}

.ap-tabbar a{position:relative;z-index:0}
.ap-tab-pill{position:absolute;inset:2px 10%;z-index:-1;border-radius:12px;background:radial-gradient(80% 90% at 50% 0,rgba(255,122,26,.22),rgba(255,122,26,.04));box-shadow:inset 0 0 0 1px rgba(255,122,26,.2)}

/* ───────────── Top bar ───────────── */
.ap-top{background:rgba(9,9,11,.62);border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,122,26,.28) 50%,rgba(255,255,255,.08) 80%,transparent) 1}
.ap-search input{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}
.ap-search input:focus{background:rgba(255,255,255,.05);box-shadow:0 0 0 4px rgba(255,122,26,.12),0 10px 30px -12px rgba(255,122,26,.45)}
.ap-live{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}
.ap-live:not([data-zero]){border-color:rgba(242,180,65,.3);background:linear-gradient(90deg,rgba(242,180,65,.10),rgba(242,180,65,.02))}
.ap-kbd-hint{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 10px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.03);color:var(--tx-3);font-size:12px;cursor:pointer;transition:border-color .2s,color .2s}
.ap-kbd-hint:hover{border-color:rgba(255,122,26,.35);color:var(--tx)}
.ap-kbd-hint kbd{padding:1px 5px;border:1px solid var(--line-2);border-radius:5px;background:var(--s2);font-size:10.5px}

/* ───────────── Cards: gradient hairline + cursor spotlight ───────────── */
.fx-card{position:relative;border:1px solid transparent!important;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 40px -24px rgba(0,0,0,.8)!important;
  background:
   radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),rgba(255,140,60,.075),transparent 42%) padding-box,
   var(--fx-tint,linear-gradient(transparent,transparent)) padding-box,
   linear-gradient(var(--fx-fill,#111114),var(--fx-fill,#111114)) padding-box,
   radial-gradient(300px circle at var(--mx,-999px) var(--my,-999px),rgba(255,150,70,.55),transparent 55%) border-box,
   linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 40%,rgba(255,255,255,.05)) border-box!important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
a.fx-card:hover,button.fx-card:hover,.fx-card.request-detail-card:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 30px 50px -26px rgba(0,0,0,.9),0 14px 40px -24px rgba(255,122,26,.35)!important}
a.fx-card:active,button.fx-card:active{transform:translateY(-1px) scale(.995)}
.dash-stat.is-primary.fx-card{--fx-tint:radial-gradient(140% 120% at 100% 0,rgba(255,122,26,.22),transparent 55%)}
.currency-vault.active.fx-card{--fx-tint:radial-gradient(120% 120% at 100% 0,rgba(255,122,26,.16),transparent 60%)}
.profile-balance.fx-card{--fx-tint:radial-gradient(120% 140% at 100% 0,rgba(255,122,26,.2),transparent 55%)}
.ap .admin-panel.fx-card,.dash-card.fx-card{--fx-fill:#101013}

/* ───────────── Entrance choreography ───────────── */
.fx-rise{animation:fx-rise .62s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--fx-i,0) * 45ms)}
@keyframes fx-rise{from{opacity:0;transform:translateY(14px) scale(.985)}}
.ap-content{animation:none}

/* ───────────── Buttons ───────────── */
.ap .admin-primary,.ap .primary,.ap .ap-btn,.ap .password-save,.ap .profile-api-save,.ap .api-primary,.ap .customer-action-activate{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#ff9445,#ff6c0a);color:#160a01;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.5),0 8px 22px -10px rgba(255,106,0,.85);transition:transform .15s,box-shadow .25s,filter .2s}
.ap .admin-primary::after,.ap .primary::after,.ap .password-save::after,.ap .api-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(120%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.ap .admin-primary:hover::after,.ap .primary:hover::after,.ap .password-save:hover::after,.ap .api-primary:hover::after{transform:translateX(-120%)}
.ap .admin-primary:hover,.ap .primary:hover,.ap .password-save:hover{background:linear-gradient(180deg,#ffa25c,#ff7417);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.5),0 14px 30px -10px rgba(255,106,0,.95)}
.ap .admin-primary:active,.ap .primary:active{transform:scale(.975)}
.ap .request-tools-copy button:nth-child(2),.ap .finance-hero .admin-primary,.ap .finance-app-hint .admin-primary,.view-admin-site-design .ap-content>a.primary{background:rgba(255,255,255,.04);color:var(--tx);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.ap .ap-btn-ghost,.ap .filter-actions a,.ap .proof-button,.ap .operation-customer-actions a,.ap .withdrawal-result-actions a,.ap .app-order-row a,.ap .admin-heading>a:not(.admin-primary){background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08);transition:background .2s,border-color .2s,transform .15s}
.ap .ap-btn-ghost:hover,.ap .filter-actions a:hover,.ap .proof-button:hover,.ap .operation-customer-actions a:hover,.ap .admin-heading>a:not(.admin-primary):hover{background:rgba(255,255,255,.07);border-color:rgba(255,122,26,.35)}

/* ───────────── Inputs ───────────── */
.ap input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=color]),.ap select,.ap textarea{background-color:rgba(0,0,0,.28);border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.ap input:focus,.ap select:focus,.ap textarea:focus{border-color:rgba(255,122,26,.55)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 0 0 4px rgba(255,122,26,.12),0 8px 26px -14px rgba(255,122,26,.6)!important}

/* ───────────── Headings ───────────── */
.ap .admin-heading h1,.dash-hero h1{font-weight:700;letter-spacing:-.015em;background:linear-gradient(180deg,#fff 30%,#c9c9d1);-webkit-background-clip:text;background-clip:text;color:transparent}
.ap .admin-heading small{display:flex;align-items:center;gap:8px}
.ap .admin-heading small::before{content:"";width:16px;height:1px;background:linear-gradient(90deg,transparent,var(--or))}

/* ───────────── Tabs: glowing selection ───────────── */
.ap .request-group-tabs,.ap .withdrawal-status-tabs,.ap .wallet-operation-tabs,.ap .profile-ledger-tabs{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.ap .request-group-tabs a.active,.ap .withdrawal-status-tabs a.active,.ap .wallet-operation-tabs a.active,.ap .profile-ledger-tabs button.active{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,122,26,.28),0 8px 22px -14px rgba(255,122,26,.8)}

/* ───────────── Status: living dots ───────────── */
.ap .status.waiting::before,.ap .status.pending::before{box-shadow:0 0 0 0 rgba(242,180,65,.6);animation:fx-ping 2s infinite}
.ap .status.active::before{box-shadow:0 0 8px rgba(91,156,255,.9)}
.ap .status.done::before{box-shadow:0 0 8px rgba(62,207,142,.8)}
@keyframes fx-ping{0%{box-shadow:0 0 0 0 rgba(242,180,65,.55)}70%{box-shadow:0 0 0 5px rgba(242,180,65,0)}100%{box-shadow:0 0 0 0 rgba(242,180,65,0)}}

/* ───────────── Tables ───────────── */
.ap tbody tr td{transition:background .2s}
.ap tbody tr:hover td{background:linear-gradient(270deg,rgba(255,122,26,.06),rgba(255,255,255,.012) 40%)}
.ap th{background:rgba(255,255,255,.025);backdrop-filter:blur(8px)}

/* ───────────── Toasts & dialogs ───────────── */
.ap-toast,.ap-confirm-card,.ap-menu,.ap .status-picker-sheet,.ap .profile-actions nav{background:linear-gradient(180deg,rgba(32,32,37,.92),rgba(22,22,26,.94));backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 70px -20px rgba(0,0,0,.9)}
.ap .profile-dialog,.ap .oc-api-dialog{background:linear-gradient(180deg,#17171b,#101013);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -20px rgba(0,0,0,.95)}

/* ───────────── Command palette ───────────── */
.fx-cmdk{position:fixed;inset:0;z-index:400;display:grid;align-items:start;justify-items:center;padding:12vh 16px 16px;background:rgba(4,4,6,.55);backdrop-filter:blur(6px);animation:ap-fade .16s}
.fx-cmdk-box{width:min(640px,100%);overflow:hidden;border-radius:18px;background:linear-gradient(180deg,rgba(30,30,35,.94),rgba(18,18,22,.96));backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 0 0 1px rgba(255,255,255,.09),0 50px 120px -30px rgba(0,0,0,.95),0 0 80px -30px rgba(255,122,26,.45);animation:fx-cmdk-in .26s cubic-bezier(.16,1,.3,1)}
@keyframes fx-cmdk-in{from{opacity:0;transform:translateY(-8px) scale(.97)}}
.fx-cmdk-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.fx-cmdk-head .ap-i{color:var(--or);width:20px;height:20px}
.fx-cmdk-head input{flex:1;min-height:0!important;height:30px;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:15.5px!important;color:var(--tx)}
.ap .fx-cmdk-head input,.ap .fx-cmdk-head input:focus{border:0!important;box-shadow:none!important;background:transparent!important;outline:0}
.fx-cmdk-head kbd{padding:2px 6px;border:1px solid var(--line-2);border-radius:6px;color:var(--tx-3);font-size:11px}
.fx-cmdk-list{max-height:min(420px,58vh);overflow-y:auto;padding:8px}
.fx-cmdk-group{padding:8px 10px 4px;color:var(--tx-3);font-size:11.5px;font-weight:500}
.fx-cmdk-item{display:flex;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--tx-2);font-size:13.5px;text-align:start;cursor:pointer}
.fx-cmdk-item .ap-i{width:17px;height:17px;color:var(--tx-3)}
.fx-cmdk-item span{flex:1}
.fx-cmdk-item em{font-style:normal;font-size:11.5px;color:var(--tx-3)}
.fx-cmdk-item.on{background:linear-gradient(270deg,rgba(255,122,26,.16),rgba(255,122,26,.04));color:var(--tx);box-shadow:inset 0 0 0 1px rgba(255,122,26,.25)}
.fx-cmdk-item.on .ap-i{color:var(--or)}
.fx-cmdk-empty{padding:28px;text-align:center;color:var(--tx-3);font-size:13px}
.fx-cmdk-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.07);color:var(--tx-3);font-size:11.5px}
.fx-cmdk-foot kbd{padding:1px 5px;margin-inline-end:4px;border:1px solid var(--line-2);border-radius:5px;font-size:10.5px}

/* ───────────── Dashboard hero ───────────── */
.fx-hero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:center;margin-bottom:16px;padding:28px 30px;border-radius:22px;border:1px solid transparent;
  background:linear-gradient(#0e0e11,#0e0e11) padding-box,linear-gradient(120deg,rgba(255,122,26,.55),rgba(255,255,255,.07) 35%,rgba(255,255,255,.04) 65%,rgba(255,122,26,.25)) border-box;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.fx-hero::before{content:"";position:absolute;inset:-40%;z-index:-1;background:conic-gradient(from 0deg at 70% 40%,transparent 0deg,rgba(255,122,26,.22) 60deg,transparent 120deg,rgba(255,180,110,.10) 200deg,transparent 260deg,rgba(255,90,0,.18) 320deg,transparent 360deg);filter:blur(60px);animation:fx-aurora 18s linear infinite;opacity:.9}
.fx-hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:18px 18px;-webkit-mask-image:linear-gradient(270deg,#000,transparent 70%);mask-image:linear-gradient(270deg,#000,transparent 70%);opacity:.5}
@keyframes fx-aurora{to{transform:rotate(360deg)}}
.fx-hero-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;color:var(--tx-2);font-size:12.5px}
.fx-chip{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:30px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.fx-chip i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.fx-clock{font-variant-numeric:tabular-nums;direction:ltr;letter-spacing:.02em;color:var(--tx)}
.fx-hero h1{font-size:34px;line-height:1.2;font-weight:700;letter-spacing:-.02em;background:linear-gradient(180deg,#fff 35%,#ffcfa8);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-hero p{margin-top:10px;color:var(--tx-2);font-size:14.5px;max-width:520px;line-height:1.75}
.fx-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.fx-hero-actions .admin-primary{min-height:44px;padding:0 20px;border-radius:12px;font-size:14px}
.fx-hero-actions .ap-btn-ghost{min-height:44px;border-radius:12px;backdrop-filter:blur(8px)}
.fx-queue{position:relative;display:grid;justify-items:center;gap:6px;padding:8px}
.fx-ring{position:relative;width:184px;height:184px}
.fx-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.fx-ring .trk{fill:none;stroke:rgba(255,255,255,.06);stroke-width:10}
.fx-ring .arc{fill:none;stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(255,122,26,.6));transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1)}
.fx-ring-c{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
.fx-ring-c strong{font-size:48px;line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fx-ring-c small{color:var(--tx-2);font-size:12.5px;margin-top:6px}
.fx-queue-legend{display:flex;gap:14px;color:var(--tx-3);font-size:12px}
.fx-queue-legend b{color:var(--tx);font-variant-numeric:tabular-nums}
.fx-queue-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:5px;vertical-align:middle}

/* Dashboard stat cards */
.dash-stat strong{font-size:30px;font-weight:700;letter-spacing:-.02em}
.dash-stat .fx-spark{display:block;width:100%;height:34px;margin-top:-2px}
.dash-stat .fx-spark path.l{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dash-stat .fx-spark path.a{opacity:.18}
.dash-stat-ico{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.dash-stat.is-wait .dash-stat-ico{color:var(--wait);background:rgba(242,180,65,.10);box-shadow:inset 0 0 0 1px rgba(242,180,65,.25),0 0 18px -6px rgba(242,180,65,.6)}
.dash-stat.is-run .dash-stat-ico{color:var(--run);background:rgba(91,156,255,.10);box-shadow:inset 0 0 0 1px rgba(91,156,255,.25),0 0 18px -6px rgba(91,156,255,.6)}
.dash-stat.is-ok .dash-stat-ico{color:var(--ok);background:rgba(62,207,142,.10);box-shadow:inset 0 0 0 1px rgba(62,207,142,.25),0 0 18px -6px rgba(62,207,142,.6)}
.dash-stat.is-bad .dash-stat-ico{color:var(--bad);background:rgba(240,107,107,.10);box-shadow:inset 0 0 0 1px rgba(240,107,107,.25),0 0 18px -6px rgba(240,107,107,.6)}
.dash-stat .dash-stat-ico .ap-i{width:16px;height:16px;color:currentColor}
.dash-stat::after{display:none}

/* Charts */
.fx-chart{position:relative}
.fx-chart svg{display:block;width:100%;height:300px;overflow:visible}
.dash-grid>.dash-card:first-child{display:flex;flex-direction:column}
.dash-grid>.dash-card:first-child .fx-chart{flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.fx-chart .grid{stroke:rgba(255,255,255,.05)}
.fx-chart .axis{fill:var(--tx-3);font:500 10.5px var(--font)}
.fx-chart .bar{fill:url(#fxBar);transform-box:fill-box;transform-origin:bottom;animation:fx-grow .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d) * 40ms)}
.fx-chart .bar.today{fill:url(#fxBarHot)}
.fx-chart .hit{fill:transparent;cursor:crosshair}
.fx-chart .hit:hover+.bar,.fx-chart g.on .bar{filter:brightness(1.4) drop-shadow(0 0 10px rgba(255,122,26,.6))}
.fx-chart .line{fill:none;stroke:#3ecf8e;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 10px rgba(62,207,142,.45));stroke-dasharray:2000;stroke-dashoffset:2000;animation:fx-draw 1.8s .35s cubic-bezier(.65,0,.35,1) forwards}
.fx-chart .area{fill:url(#fxArea);opacity:0;animation:ap-fade .8s 1.1s forwards;animation-fill-mode:forwards}
.fx-chart .dot{fill:#0e0e11;stroke:#3ecf8e;stroke-width:2;opacity:0;transition:opacity .2s}
.fx-chart g.on .dot{opacity:1}
@keyframes fx-grow{from{transform:scaleY(0)}}
@keyframes fx-draw{to{stroke-dashoffset:0}}
@keyframes ap-fade{from{opacity:0}}
.fx-chart .area{animation-name:fx-show}
@keyframes fx-show{to{opacity:1}}
.fx-tip{position:absolute;z-index:5;pointer-events:none;min-width:150px;padding:10px 12px;border-radius:12px;background:rgba(24,24,28,.94);backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(255,255,255,.09),0 20px 40px -12px rgba(0,0,0,.9);font-size:12px;color:var(--tx-2);opacity:0;transform:translate(-50%,-8px);transition:opacity .15s,left .12s,top .12s}
.fx-tip.on{opacity:1}
.fx-tip b{display:block;margin-bottom:6px;color:var(--tx);font-size:12.5px}
.fx-tip div{display:flex;justify-content:space-between;gap:14px}
.fx-tip i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-inline-end:6px}
.fx-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;color:var(--tx-3);font-size:12px}
.fx-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px}
.fx-donut{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}
.fx-donut svg{width:150px;height:150px;transform:rotate(-90deg)}
.fx-donut circle{fill:none;stroke-width:16}
.fx-donut .seg{stroke-dasharray:0 999;animation:fx-seg 1.2s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--d) * 120ms + .2s)}
@keyframes fx-seg{to{stroke-dasharray:var(--len) 999}}
.fx-donut-c{position:relative}
.fx-donut-c>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.fx-donut-c strong{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.fx-donut-c small{color:var(--tx-3);font-size:11.5px}
.fx-donut ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fx-donut li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tx-2)}
.fx-donut li i{width:9px;height:9px;border-radius:3px;flex:none}
.fx-donut li span{flex:1}
.fx-donut li b{color:var(--tx);font-variant-numeric:tabular-nums}
.fx-donut li em{font-style:normal;color:var(--tx-3);font-size:11.5px;min-width:36px;text-align:end}

/* ───────────── Admin login ───────────── */
.fx-login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr)}
.fx-login-art{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:48px;border-inline-end:1px solid rgba(255,255,255,.06)}
.fx-login-art::before{content:"";position:absolute;inset:-30%;z-index:-1;background:conic-gradient(from 90deg at 60% 45%,transparent,rgba(255,122,26,.30) 70deg,transparent 140deg,rgba(255,170,90,.12) 220deg,transparent 300deg);filter:blur(70px);animation:fx-aurora 22s linear infinite}
.fx-login-art::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 60% 50%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 60% 50%,#000,transparent 70%)}
.fx-login-brand{display:flex;align-items:center;gap:12px}
.fx-login-brand img{width:44px;height:44px;border-radius:12px;object-fit:contain;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 10px 30px -8px rgba(255,122,26,.6)}
.fx-login-brand b{font-size:17px}
.fx-login-brand small{display:block;color:var(--tx-3);font-size:12px}
.fx-login-copy h1{font-size:44px;line-height:1.15;font-weight:700;letter-spacing:-.02em;max-width:520px;background:linear-gradient(180deg,#fff 30%,#ffc596);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-login-copy p{margin-top:16px;color:var(--tx-2);font-size:15px;max-width:460px;line-height:1.8}
.fx-login-feats{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.fx-login-feats span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:30px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--tx-2);font-size:12.5px;backdrop-filter:blur(8px)}
.fx-login-feats .ap-i{width:15px;height:15px;color:var(--or)}
.fx-login-foot{color:var(--tx-3);font-size:12px}
.fx-login-pane{display:grid;place-items:center;padding:40px 24px}
.fx-login-card{width:min(400px,100%)}
.fx-login-card h2{font-size:24px;font-weight:700}
.fx-login-card>p{margin:6px 0 26px;color:var(--tx-2)}
.fx-login-card form{display:grid;gap:16px}
.fx-login-card label{display:grid;gap:7px;font-size:13px;font-weight:500;color:var(--tx-2)}
.fx-login-card .fx-phone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px}
.fx-login-card input,.fx-login-card select{min-height:48px!important;border-radius:12px!important;font-size:14.5px!important}
.fx-login-card .admin-primary{min-height:50px;border-radius:12px;font-size:15px;margin-top:4px}
.fx-login-card .fx-login-note{display:flex;align-items:center;gap:8px;margin-top:22px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);color:var(--tx-3);font-size:12.5px}
.fx-login-card .fx-login-note .ap-i{color:var(--ok);width:16px;height:16px}
.fx-login-card .fx-forgot{justify-self:start;color:var(--tx-3);font-size:12.5px}
.fx-login-card .fx-forgot:hover{color:var(--or)}

/* ───────────── Responsive / motion safety ───────────── */
@media (max-width:1024px){
  .fx-hero{grid-template-columns:1fr;padding:22px}
  .fx-queue{grid-template-columns:auto 1fr;justify-items:start;align-items:center;gap:16px}
  .fx-ring{width:132px;height:132px}
  .fx-ring-c strong{font-size:36px}
  .fx-login{grid-template-columns:1fr}
  .fx-login-art{min-height:auto;padding:28px 22px;border:0}
  .fx-login-copy h1{font-size:28px}
  .fx-login-copy p{font-size:13.5px}
  .fx-login-feats,.fx-login-foot{display:none}
  .fx-login-pane{padding:8px 20px 40px;align-items:start}
  .ap-kbd-hint{display:none}
}
@media (max-width:720px){
  .fx-hero h1{font-size:24px}
  .fx-hero p{font-size:13.5px}
  .fx-hero-actions>*{flex:1}
  .fx-queue{grid-template-columns:1fr;justify-items:center}
  .fx-queue-legend{flex-wrap:wrap;justify-content:center}
  .fx-donut{grid-template-columns:120px 1fr;gap:14px}
  .fx-donut svg{width:120px;height:120px}
  .fx-chart svg{height:190px}
  a.fx-card:hover,.fx-card.request-detail-card:hover{transform:none}
  body.ap::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .fx-hero::before,.fx-login-art::before{animation:none}
}

/* ───────────── Copy buttons: inline state instead of a toast ───────────── */
.ap .app-toast{display:none!important}
.ap .request-copy-feedback{display:none!important}
.ap .request-copy-feedback.show{display:inline!important;color:var(--wait);font-size:12px}
.ap .ap-copied,.ap .ap-copy-warn,.ap .ap-copy-fail{position:relative;justify-content:center;transition:background .25s,color .25s,box-shadow .25s,border-color .25s!important;animation:fx-pop .32s cubic-bezier(.3,1.5,.5,1)}
.ap button.ap-copied,.ap .ap-copied{background:linear-gradient(180deg,#45d99a,#22b874)!important;color:#03140b!important;border-color:transparent!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px -10px rgba(62,207,142,.9)!important}
.ap button.ap-copy-warn{background:linear-gradient(180deg,#ff9445,#ff6c0a)!important;color:#160a01!important;border-color:transparent!important;box-shadow:0 8px 22px -10px rgba(255,106,0,.9)!important}
.ap button.ap-copy-fail{background:var(--bad-soft)!important;color:#ff9d9d!important;border-color:rgba(240,107,107,.45)!important}
.ap .ap-copied .ap-i,.ap .ap-copy-warn .ap-i{width:14px;height:14px;animation:fx-tick .35s .05s both}
.ap code.ap-copied{border-radius:6px;padding-inline:4px}
@keyframes fx-pop{40%{transform:scale(1.06)}}
@keyframes fx-tick{from{opacity:0;transform:scale(.4) rotate(-20deg)}}

/* ───────────── Rejection shortcuts ───────────── */
.ap .reject-presets{display:grid;gap:8px;padding:12px;border-radius:14px;background:linear-gradient(180deg,rgba(240,107,107,.06),rgba(240,107,107,.015));box-shadow:inset 0 0 0 1px rgba(240,107,107,.18);animation:fx-rise .35s cubic-bezier(.16,1,.3,1)}
.ap .reject-presets-head{display:grid;gap:2px;padding:2px 4px 4px}
.ap .reject-presets-head b{font-size:13.5px;color:#ffb4b4}
.ap .reject-presets-head small{color:var(--tx-3);font-size:12px}
.ap .reject-group{border-radius:11px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden;transition:box-shadow .2s}
.ap .reject-group[open]{box-shadow:inset 0 0 0 1px rgba(240,107,107,.35)}
.ap .reject-group summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;cursor:pointer;font-size:13.5px}
.ap .reject-group summary::-webkit-details-marker{display:none}
.ap .reject-group summary:hover{background:rgba(255,255,255,.03)}
.ap .reject-group summary b{flex:1;font-weight:600}
.ap .reject-group summary em{font-style:normal;font-size:11.5px;color:var(--tx-3);padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.05)}
.ap .reject-group summary i{font-style:normal;color:var(--tx-3);transition:transform .25s}
.ap .reject-group[open] summary i{transform:rotate(180deg)}
.ap .reject-group-ico{width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 10px rgba(240,107,107,.8)}
.ap .reject-group[data-group=recipient] .reject-group-ico{background:var(--wait);box-shadow:0 0 10px rgba(242,180,65,.8)}
.ap .reject-group[data-group=jaib] .reject-group-ico{background:var(--run);box-shadow:0 0 10px rgba(91,156,255,.8)}
.ap .reject-options{display:grid;gap:4px;padding:4px 8px 10px}
.ap .reject-group[open] .reject-options{animation:fx-rise .3s cubic-bezier(.16,1,.3,1)}
.ap .reject-options button{display:flex;align-items:flex-start;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--tx-2);font-size:13px;line-height:1.6;text-align:start;transition:background .15s,color .15s,box-shadow .15s}
.ap .reject-options button span{flex:none;width:20px;height:20px;margin-top:1px;display:grid;place-items:center;border-radius:6px;background:rgba(255,255,255,.06);color:var(--tx-3);font-size:11px;font-variant-numeric:tabular-nums}
.ap .reject-options button:hover{background:rgba(255,255,255,.05);color:var(--tx)}
.ap .reject-options button.on{background:linear-gradient(270deg,rgba(240,107,107,.18),rgba(240,107,107,.05));color:#fff;box-shadow:inset 0 0 0 1px rgba(240,107,107,.45)}
.ap .reject-options button.on span{background:var(--bad);color:#180505}
.ap textarea.note-filled{animation:fx-fill .7s ease}
@keyframes fx-fill{0%{box-shadow:0 0 0 0 rgba(240,107,107,.6)}100%{box-shadow:0 0 0 8px rgba(240,107,107,0)}}

/* ───────────── Site-design studio ───────────── */
.ds-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ds-live-dot{display:inline-block;width:7px;height:7px;margin-inline-end:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:ap-pulse 2s infinite}
.ap .design-controls{padding:0!important;overflow:visible}
.ds-tabs{border-radius:14px 14px 0 0}
.ds-tabs{position:sticky;top:var(--top-h);z-index:6;display:flex;gap:4px;padding:8px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(16,16,19,.88);backdrop-filter:blur(14px);overflow-x:auto;scrollbar-width:none}
.ds-tabs::-webkit-scrollbar{display:none}
.ds-tabs button{flex:1 0 auto;min-height:38px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:var(--tx-2);font-size:13.5px;font-weight:500;transition:background .2s,color .2s,box-shadow .2s}
.ds-tabs button:hover{color:var(--tx);background:rgba(255,255,255,.04)}
.ds-tabs button.on{color:var(--tx);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,122,26,.3),0 8px 22px -14px rgba(255,122,26,.8)}
.ds-sec{padding:20px;animation:fx-rise .4s cubic-bezier(.16,1,.3,1)}
.ap .design-controls .panel-title{margin:0 0 16px;padding:0;border:0}
.ap .design-controls .ds-sec .panel-title~.panel-title{margin-top:26px}
.ap .design-controls .panel-title small{color:var(--or)}
.ap .design-color-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.ap .design-color-grid label{position:relative;display:flex!important;align-items:center;gap:12px;padding:10px;border-radius:12px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);cursor:pointer;transition:box-shadow .2s,transform .2s}
.ap .design-color-grid label:hover{box-shadow:inset 0 0 0 1px rgba(255,122,26,.35);transform:translateY(-1px)}
.ap .design-color-grid input[type=color]{flex:none;width:40px;height:40px;padding:0;border:0;border-radius:11px;background:none;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 16px -6px rgba(0,0,0,.8);overflow:hidden}
.ap .design-color-grid input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.ap .design-color-grid input[type=color]::-webkit-color-swatch{border:0;border-radius:11px}
.ap .design-color-grid input[type=color]::-moz-color-swatch{border:0;border-radius:11px}
.ap .design-color-grid label>span{display:grid;gap:2px;min-width:0;font-size:12.5px;color:var(--tx);font-weight:500}
.ap .design-color-grid label>span b{font:500 11.5px var(--mono);color:var(--tx-3);direction:ltr;text-align:right;text-transform:uppercase}
.ap .design-choice-grid,.ap .design-columns{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ap .design-choice-grid label,.ap .design-columns label{display:grid;gap:8px;font-size:12.5px;color:var(--tx-2)}
.ap .ds-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;opacity:0;pointer-events:none}
.ds-chips{display:flex;flex-wrap:wrap;gap:6px}
.ds-chips button{min-height:32px;padding:0 12px;border:0;border-radius:9px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:var(--tx-2);font-size:12.5px;font-weight:500;transition:background .18s,color .18s,box-shadow .18s,transform .12s}
.ds-chips button:hover{color:var(--tx);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.ds-chips button:active{transform:scale(.96)}
.ds-chips button.on{background:linear-gradient(180deg,rgba(255,148,69,.22),rgba(255,108,10,.12));color:#ffd2ad;box-shadow:inset 0 0 0 1px rgba(255,122,26,.55),0 6px 16px -10px rgba(255,122,26,.9)}
.ap .design-switches{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin:0 0 14px}
.ap .design-switches label{display:flex!important;align-items:center;gap:12px;min-height:46px;padding:10px 14px;border-radius:11px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);cursor:pointer;font-size:13px;color:var(--tx);font-weight:500;transition:box-shadow .2s,background .2s}
.ap .design-switches label span{flex:1}
.ap .design-switches input{-webkit-appearance:none;appearance:none;order:9;width:36px!important;height:20px!important;margin:0;border-radius:20px;background:var(--s4);box-shadow:inset 0 0 0 1px var(--line-3);position:relative;cursor:pointer;transition:background .18s;flex:none}
.ap .design-switches input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:14px;height:14px;border-radius:50%;background:#d4d4da;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.ap .design-switches input:checked{background:var(--or);box-shadow:0 0 12px -2px rgba(255,122,26,.8)}
.ap .design-switches input:checked::after{transform:translateX(-16px);background:#fff}
.ap .design-switches label:has(input:checked){box-shadow:inset 0 0 0 1px rgba(255,122,26,.35);background:linear-gradient(270deg,rgba(255,122,26,.09),rgba(0,0,0,.2))}
.ap .design-home-content{margin-bottom:14px}
.ap .header-brand-editor>p{grid-column:1/-1;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);color:var(--tx-3)}
.ap .design-save-bar{position:sticky;bottom:14px;margin:4px 20px 20px;padding:12px 14px;border-radius:14px;background:rgba(20,20,24,.9);backdrop-filter:blur(16px);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 40px -14px rgba(0,0,0,.9)}
.ds-dirty{display:flex;align-items:center;gap:10px;color:var(--tx-3);font-size:12.5px}
.ds-dirty i{width:8px;height:8px;border-radius:50%;background:var(--tx-3);flex:none}
.ds-dirty b{font-weight:500}
.design-save-bar.dirty{box-shadow:0 0 0 1px rgba(255,122,26,.45),0 20px 50px -14px rgba(255,122,26,.45)!important}
.design-save-bar.dirty .ds-dirty{color:#ffd2ad}
.design-save-bar.dirty .ds-dirty i{background:var(--or);box-shadow:0 0 0 0 rgba(255,122,26,.6);animation:fx-ping-or 1.6s infinite}
@keyframes fx-ping-or{70%{box-shadow:0 0 0 7px rgba(255,122,26,0)}}
.ap .design-preview-wrap{padding:14px;border-radius:20px;background:radial-gradient(120% 80% at 50% 0,rgba(255,122,26,.08),transparent 60%),rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ap .preview-device-switch{display:flex;gap:4px;width:max-content;margin:0 auto 14px;padding:4px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.ap .preview-device-switch button{border:0!important;background:transparent!important;color:var(--tx-2)!important;border-radius:9px!important;min-height:32px;padding:0 14px!important;font-size:12.5px;font-weight:500!important}
.ap .preview-device-switch button.active{background:linear-gradient(180deg,#ff9445,#ff6c0a)!important;color:#160a01!important;box-shadow:0 6px 16px -8px rgba(255,106,0,.9)}
@media (max-width:720px){.ds-sec{padding:14px}.ap .design-save-bar{margin:4px 12px 14px;flex-direction:column;align-items:stretch}.ap .design-save-bar .admin-primary{width:100%}.ap .design-choice-grid,.ap .design-columns{grid-template-columns:1fr}}

/* Quick find (client-side filter) */
.ap-quickfind{position:relative;display:flex;align-items:center;margin:0 0 12px}
.ap-quickfind .ap-i{position:absolute;inset-inline-start:12px;color:var(--tx-3);pointer-events:none}
.ap .ap-quickfind input{padding-inline-start:40px!important;min-height:44px!important;border-radius:12px!important}
.ap-quickfind em{position:absolute;inset-inline-end:12px;font-style:normal;font-size:12px;color:var(--tx-3)}
.fx-chip-ready{color:#ffd2ad;box-shadow:inset 0 0 0 1px rgba(255,122,26,.45)!important;background:rgba(255,122,26,.12)!important}
.fx-chip-ready i{background:var(--or)!important;box-shadow:0 0 10px var(--or)!important;animation:fx-ping-or 1.6s infinite}
.ap-file-row{display:flex;align-items:center;gap:10px}
.ap-current-img{width:42px;height:42px;flex:none;border-radius:10px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12)}

/* Reject presets collapse to the chosen reason */
.ap .reject-presets.is-picked .reject-group,.ap .reject-presets.is-picked .reject-presets-head{display:none}
.ap .reject-picked{display:flex;align-items:center;gap:10px;padding:4px;animation:fx-rise .3s cubic-bezier(.16,1,.3,1)}
.ap .reject-picked[hidden]{display:none}
.ap .reject-picked-ico{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--bad);color:#180505;font-weight:700;font-size:13px;box-shadow:0 0 14px -2px rgba(240,107,107,.8)}
.ap .reject-picked>div{flex:1;display:grid;min-width:0}
.ap .reject-picked small{color:var(--tx-3);font-size:11.5px}
.ap .reject-picked b{font-size:13px;font-weight:500;color:var(--tx);overflow-wrap:anywhere}
.ap .reject-picked button{flex:none;min-height:32px;padding:0 12px;border:0;border-radius:9px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--tx-2);font-size:12.5px}
.ap .reject-picked button:hover{color:var(--tx);box-shadow:inset 0 0 0 1px rgba(240,107,107,.5)}

/* ───────────── Real customer preview (site-design) ───────────── */
.ap .design-preview-wrap>.preview-device-switch,.ap .design-preview-wrap>#design-preview,.ap .design-preview-wrap>p{display:none!important}
.pv-wrap{display:grid;gap:12px}
.pv-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pv-devices{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.pv-devices button{min-height:32px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--tx-2);font-size:12.5px;font-weight:500;transition:background .2s,color .2s}
.pv-devices button.on{background:linear-gradient(180deg,#ff9445,#ff6c0a);color:#160a01;box-shadow:0 6px 16px -8px rgba(255,106,0,.9)}
.pv-live{display:inline-flex;align-items:center;gap:7px;color:var(--tx-3);font-size:12px}
.pv-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:ap-pulse 2s infinite}
.pv-stage{display:grid;justify-items:center;min-width:0;overflow:hidden}
.pv-device{position:relative;overflow:hidden;border-radius:22px;background:#111015;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 0 7px #17171b,0 0 0 8px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.95);transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1)}
.pv-stage[data-device=desktop] .pv-device,.pv-stage[data-device=tablet] .pv-device{border-radius:12px}
.pv-device iframe{position:absolute;top:0;right:0;border:0;transform-origin:top right;background:#111015}
.pv-note{margin:0;color:var(--tx-3);font-size:12px;line-height:1.7;text-align:center}
.ds-legacy-note{margin:0 0 16px;padding:10px 12px;border-radius:10px;background:rgba(91,156,255,.08);box-shadow:inset 0 0 0 1px rgba(91,156,255,.25);color:#a9c8ff;font-size:12.5px;line-height:1.7}
.ap .design-studio{grid-template-columns:minmax(0,1.25fr) minmax(360px,.9fr)}

.ds-theme-switch{display:grid;gap:10px;margin-bottom:18px;padding:12px;border-radius:14px;background:linear-gradient(180deg,rgba(255,122,26,.07),rgba(255,122,26,.02));box-shadow:inset 0 0 0 1px rgba(255,122,26,.22)}
.ds-theme-switch .design-switches{margin:0;grid-template-columns:1fr}
.ds-theme-switch label span{display:grid;gap:3px}
.ds-theme-switch label small{color:var(--tx-3);font-weight:400;font-size:12px}
.ds-theme-switch .ap-btn-ghost{justify-self:start;min-height:34px;font-size:12.5px}

.dash-stat.is-ready .dash-stat-ico{color:var(--or);background:rgba(255,122,26,.10);box-shadow:inset 0 0 0 1px rgba(255,122,26,.3),0 0 18px -6px rgba(255,122,26,.7)}
.dash-stat.is-ready strong{color:#ffd2ad}

.ap .operation-wallet-card header>div{flex:1;min-width:0}
.ap .wallet-copy-all{flex:none;min-height:36px;font-size:12.5px}
.ap .wallet-copy-all svg{width:15px;height:15px}

/* Touch: no blue tap flash; subtle press feedback instead */
.ap,.ap *{-webkit-tap-highlight-color:transparent}
.ap :is(a,button,summary,label,[role=button]):focus:not(:focus-visible){outline:none}
@media (hover:none){.ap :is(a,button,summary):active{opacity:.82;transition:opacity .08s}}

/* Customer cards fit any phone width; full names wrap instead of being cut */
.ap .customer-gallery{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.ap .customer-gallery>*{min-width:0}
@media (max-width:720px){
 .ap .customer-gallery-card{padding:14px 12px;gap:10px;align-items:flex-start}
 .ap .customer-avatar{width:38px;height:38px;font-size:15px;border-radius:10px}
 .ap .customer-name-row{flex-wrap:wrap;align-items:flex-start;gap:4px 8px}
 .ap .customer-name-row h3{white-space:normal;overflow-wrap:anywhere;line-height:1.5;flex:1 1 140px}
 .ap .customer-name-row .status{flex:none}
 .ap .customer-identifiers{gap:6px 16px}
 .ap .customer-stats span{font-size:11.5px}
 .ap .gallery-arrow{align-self:center}
}

/* ───────────── Page transitions v2: chrome stays still, the page glides ───────────── */
.ap-content{view-transition-name:ap-page}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(ap-page){animation:none}
::view-transition-image-pair(ap-page){isolation:isolate}
::view-transition-old(ap-page){animation:fx-pg-out .24s cubic-bezier(.5,0,.75,0) both}
::view-transition-new(ap-page){animation:fx-pg-in .62s cubic-bezier(.16,1,.3,1) .05s both}
@keyframes fx-pg-out{to{opacity:0;transform:translateY(-10px) scale(.982);filter:blur(8px)}}
@keyframes fx-pg-in{from{opacity:0;transform:translateY(22px) scale(.988);filter:blur(12px)}}
/* deeper page (list → detail): moves forward in reading direction (RTL → leftwards) */
html:active-view-transition-type(deeper)::view-transition-old(ap-page){animation-name:fx-pg-out-fwd}
html:active-view-transition-type(deeper)::view-transition-new(ap-page){animation-name:fx-pg-in-fwd}
html:active-view-transition-type(back)::view-transition-old(ap-page){animation-name:fx-pg-out-back}
html:active-view-transition-type(back)::view-transition-new(ap-page){animation-name:fx-pg-in-back}
@keyframes fx-pg-out-fwd{to{opacity:0;transform:translateX(42px) scale(.97);filter:blur(8px)}}
@keyframes fx-pg-in-fwd{from{opacity:0;transform:translateX(-56px) scale(.985);filter:blur(10px)}}
@keyframes fx-pg-out-back{to{opacity:0;transform:translateX(-42px) scale(.97);filter:blur(8px)}}
@keyframes fx-pg-in-back{from{opacity:0;transform:translateX(56px) scale(.985);filter:blur(10px)}}

/* Light sweep along the top bar edge on arrival */
.fx-sweep{position:absolute;inset-inline:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden;opacity:0}
.fx-sweep::before{content:"";position:absolute;top:0;bottom:0;width:38%;right:-40%;background:linear-gradient(90deg,transparent,rgba(255,122,26,.25) 30%,#ff9a4a 75%,#fff3e6);box-shadow:0 0 14px 2px rgba(255,122,26,.55);border-radius:2px}
html.fx-arrive .fx-sweep{opacity:1;animation:fx-fade-late .9s ease forwards}
html.fx-arrive .fx-sweep::before{animation:fx-sweep .85s cubic-bezier(.65,0,.35,1) forwards}
@keyframes fx-sweep{to{right:105%}}
@keyframes fx-fade-late{0%,70%{opacity:1}100%{opacity:0}}
/* Progress bar: glowing comet head while the next page loads */
.ap-progress{height:2px;background:linear-gradient(90deg,transparent,rgba(255,122,26,.4) 40%,#ff7a1a 85%,#ffd2a8);box-shadow:0 0 12px rgba(255,122,26,.7)}
/* Arrived tab: the icon pops */
html.fx-arrive .ap-tabbar a.active svg,html.fx-arrive .ap-tabbar a[aria-current] svg{animation:fx-tab-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes fx-tab-pop{0%{transform:scale(.6) translateY(4px)}100%{transform:none}}

/* Fallback for browsers without cross-page transitions: soft exit before leaving */
html.fx-leaving .ap-content{transition:opacity .18s ease,transform .18s ease,filter .18s ease;opacity:0;transform:translateY(-8px) scale(.985);filter:blur(6px)}
@media (prefers-reduced-motion:reduce){html.fx-leaving .ap-content{transition:none;opacity:1;transform:none;filter:none}.fx-sweep{display:none}}

/* Settings: request alert panel */
.ap .qa-panel{display:grid;gap:14px;margin-bottom:16px;background:radial-gradient(120% 140% at 100% 0,rgba(255,122,26,.10),transparent 55%),var(--s1)}
.ap .qa-head{display:flex;gap:14px;align-items:flex-start}
.ap .qa-bell{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--or-soft);box-shadow:inset 0 0 0 1px var(--or-line);font-size:21px}
.ap .qa-head small{color:var(--or);font-size:12px;font-weight:500}
.ap .qa-head h2{font-size:18px;margin:2px 0 4px}
.ap .qa-head p{color:var(--tx-2);font-size:13.5px;line-height:1.8;margin:0}
.ap .qa-head p b{color:var(--tx);font-weight:600}
.ap .qa-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px;border-radius:12px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line)}
.ap .qa-state{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--tx-2)}
.ap .qa-state i{width:9px;height:9px;border-radius:50%;background:var(--tx-3);box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.ap .qa-state.on{color:var(--tx)}
.ap .qa-state.on i{background:#3ecf8e;box-shadow:0 0 0 4px rgba(62,207,142,.16);animation:fx-ping-g 2s infinite}
@keyframes fx-ping-g{70%{box-shadow:0 0 0 8px rgba(62,207,142,0)}}
.ap .qa-actions{display:flex;gap:8px;flex-wrap:wrap}
.ap #enable-queue-sound{min-height:38px;padding:0 16px;border:0;border-radius:10px;background:var(--or);color:var(--or-ink);font:inherit;font-weight:600;cursor:pointer;transition:background .15s}
.ap #enable-queue-sound.enabled{background:var(--s3);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line-2)}
.ap .qa-note{color:var(--tx-3);font-size:12px}
@media (max-width:720px){.ap .qa-actions{width:100%}.ap .qa-actions>*{flex:1}}

/* ───────────── Logo splash between pages: frosted page + logo light sweep ───────────── */
.fx-splash{position:fixed;inset:0;z-index:400;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden;background:rgba(10,10,12,.34);-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}
.fx-splash-logo{position:relative;display:grid;place-items:center;--w:clamp(96px,26vw,140px)}
.fx-splash-logo img{width:var(--w);height:auto;max-height:120px;object-fit:contain;filter:drop-shadow(0 10px 28px rgba(0,0,0,.55))}
/* light sweep clipped to the logo's own shape */
.fx-splash-logo::before{content:"";position:absolute;inset:0;-webkit-mask:var(--fx-logo) center/contain no-repeat;mask:var(--fx-logo) center/contain no-repeat;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.32) 50%,transparent 62%) 160% 0/250% 100% no-repeat;mix-blend-mode:soft-light;opacity:0}
/* halo ring + soft orbit */
.fx-splash-logo::after{content:"";position:absolute;width:calc(var(--w) * 1.55);aspect-ratio:1;border-radius:50%;border:1.5px solid transparent;background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,255,255,.28) 90%,transparent) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);opacity:0}
/* leaving: the current page frosts over, the logo materialises out of blur */
.fx-splash.on{visibility:visible;opacity:1;-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);transition:opacity .16s ease,backdrop-filter .26s ease,-webkit-backdrop-filter .26s ease}
.fx-splash.on .fx-splash-logo img{animation:fx-sp-in .42s cubic-bezier(.16,1,.3,1) both}
.fx-splash.on .fx-splash-logo::before{animation:fx-sp-shine .7s cubic-bezier(.4,0,.2,1) .12s both}
.fx-splash.on .fx-splash-logo::after{animation:fx-sp-orbit .9s cubic-bezier(.3,0,.2,1) .05s both}
@keyframes fx-sp-in{0%{opacity:0;transform:scale(.9);filter:blur(10px) drop-shadow(0 10px 28px rgba(0,0,0,0))}100%{opacity:1;transform:none;filter:blur(0) drop-shadow(0 10px 28px rgba(0,0,0,.55))}}
@keyframes fx-sp-shine{0%{opacity:1;background-position:160% 0}100%{opacity:1;background-position:-60% 0}}
@keyframes fx-sp-orbit{0%{opacity:0;transform:scale(.92) rotate(-60deg)}100%{opacity:.7;transform:scale(1) rotate(180deg)}}
/* arriving: the new page starts frosted, then the frost melts while the logo dissolves into light */
html.fx-splash-in .fx-splash{visibility:visible;opacity:1;-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25)}
html.fx-splash-in .fx-splash-logo::after{opacity:.7;animation:fx-sp-spin 1.4s linear infinite}
@keyframes fx-sp-spin{to{transform:rotate(360deg)}}
.fx-splash.out{opacity:0!important;-webkit-backdrop-filter:blur(0) saturate(1)!important;backdrop-filter:blur(0) saturate(1)!important;transition:opacity .38s cubic-bezier(.4,0,.2,1) .06s,backdrop-filter .42s cubic-bezier(.4,0,.2,1),-webkit-backdrop-filter .42s cubic-bezier(.4,0,.2,1),visibility 0s .46s}
.fx-splash.out .fx-splash-logo img{animation:fx-sp-out .42s cubic-bezier(.3,0,.2,1) both}
.fx-splash.out .fx-splash-logo::after{animation:fx-sp-ring-out .42s ease-out both}
@keyframes fx-sp-out{0%{transform:none;opacity:1;filter:blur(0)}100%{transform:scale(1.06);opacity:0;filter:blur(8px)}}
@keyframes fx-sp-ring-out{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.fx-splash{display:none}}

/* ───────────── Custom select picker ───────────── */
.ap-pick{position:relative;display:block;width:100%;min-width:0}
.ap-pick-native{position:absolute!important;inset:0;width:100%!important;height:100%!important;opacity:0!important;pointer-events:none!important}
.ap-pick-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:42px;padding:0 12px;border-radius:11px;background:var(--s2,#18181b);border:1px solid var(--line-2,rgba(255,255,255,.1));color:var(--tx,#f4f4f5);font:inherit;font-size:13.5px;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.ap-pick-btn span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-pick-btn svg{width:16px;height:16px;flex:none;color:var(--tx-3,#8a8a93);transition:transform .2s}
.ap-pick-btn:hover{border-color:var(--line-3,rgba(255,255,255,.18))}
.ap-pick-btn.open,.ap-pick-btn:focus-visible{border-color:var(--or,#ff7a1a);box-shadow:0 0 0 3px rgba(255,122,26,.18);outline:none}
.ap-pick-btn.open svg{transform:rotate(180deg)}
.ap-pick-btn:disabled{opacity:.55;cursor:not-allowed}
.ap-pick-pop{position:fixed;inset:0;z-index:300;pointer-events:none}
.ap-pick-pop .ap-pick-panel{position:fixed;max-width:min(420px,calc(100vw - 16px));max-height:340px;display:flex;flex-direction:column;padding:6px;border-radius:14px;background:#1b1b1f;border:1px solid rgba(255,255,255,.1);box-shadow:0 22px 50px rgba(0,0,0,.55);pointer-events:auto;opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top;transition:opacity .16s,transform .16s}
.ap-pick-pop.in .ap-pick-panel{opacity:1;transform:none}
.ap-pick-list{overflow-y:auto;overscroll-behavior:contain}
.ap-pick-list button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:9px;background:none;color:#e4e4e7;font:inherit;font-size:13.5px;text-align:start;cursor:pointer}
.ap-pick-list button[hidden]{display:none}
.ap-pick-list button span{flex:1}
.ap-pick-list button em{font-style:normal;color:#ff7a1a;opacity:0;font-weight:800}
.ap-pick-list button:hover{background:rgba(255,255,255,.05)}
.ap-pick-list button.on{background:rgba(255,122,26,.12);color:#fff}
.ap-pick-list button.on em{opacity:1}
.ap-pick-list button:disabled{opacity:.4;cursor:not-allowed}
.ap-pick-grp{padding:8px 12px 4px;color:#8a8a93;font-size:11px;font-weight:700}
.ap-pick-q{margin:2px 2px 6px;min-height:38px;padding:0 12px;border-radius:9px;background:#111113;border:1px solid rgba(255,255,255,.1);color:#fff;font:inherit;font-size:13px}
.ap-pick-pop.sheet{pointer-events:auto}
.ap-pick-pop.sheet .ap-pick-back{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s}
.ap-pick-pop.sheet.in .ap-pick-back{opacity:1}
.ap-pick-pop.sheet .ap-pick-panel{left:0!important;right:0;bottom:0;top:auto!important;max-width:none;max-height:72vh;border-radius:20px 20px 0 0;padding:8px 10px calc(14px + env(safe-area-inset-bottom));transform:translateY(100%);opacity:1;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.ap-pick-pop.sheet.in .ap-pick-panel{transform:none}
.ap-pick-pop.sheet .ap-pick-list button{padding:13px 14px;font-size:15px}
.ap-pick-grab{display:block;width:44px;height:5px;margin:2px auto 10px;border-radius:3px;background:rgba(255,255,255,.2)}
/* Withdrawal alert toast */
#admin-wd-toast{position:fixed;z-index:250;inset-inline-end:16px;bottom:16px;max-width:calc(100vw - 32px);padding:12px 16px;border-radius:14px;background:linear-gradient(180deg,#ff9a4d,#ff6a00);color:#1a0d00;font-weight:700;font-size:13.5px;text-decoration:none;box-shadow:0 14px 34px -8px rgba(255,106,0,.65)}
@media(max-width:900px){#admin-wd-toast{bottom:84px;inset-inline-start:16px;text-align:center}}