/* ============================================================
   PaidDesk — hero app dashboard (single, realistic, premium)
   ============================================================ */
.hero-mock{position:relative}
.hero-mock::before{content:"";position:absolute;inset:-8% -6% -14% -6%;z-index:-1;border-radius:42px;
  background:radial-gradient(58% 56% at 72% 18%,rgba(23,190,199,.24),transparent 70%);filter:blur(14px)}

.app{position:relative;border-radius:18px;border:1px solid #e6eef0;background:#fff;box-shadow:var(--sh-lg);
  overflow:hidden;transform:perspective(1900px) rotateY(-6deg) rotateX(2.4deg);
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.app:hover{transform:perspective(1900px) rotateY(-1.5deg) rotateX(.6deg)}

.app-bar{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid #eef3f4;background:#fbfdfd}
.app-bar i{width:11px;height:11px;border-radius:50%;background:#dbe7ea}
.app-bar i:nth-child(1){background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}
.app-bar i:nth-child(2){background:#febc2e;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}
.app-bar i:nth-child(3){background:#28c840;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}
.app-bar .url{margin-left:auto;font-size:11px;color:#9fb6bc;font-weight:600}

.app-body{display:flex}
.app-side{width:52px;flex-shrink:0;border-right:1px solid #eef3f4;background:#fafcfc;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0}
.app-side .lg{width:28px;height:28px;object-fit:contain;margin-bottom:6px}
.app-side .ni{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#a7bcc2}
.app-side .ni svg{width:19px;height:19px}
.app-side .ni.on{background:#eaf7f8;color:var(--teal-dp)}

.app-main{flex:1;padding:11px 16px;min-width:0}
.app-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.app-top .tt{font-weight:800;font-size:15px;color:var(--ink);letter-spacing:-.01em}
.app-top .ts{font-size:11.5px;color:#9fb6bc;font-weight:600;margin-top:1px}
.app-new{display:inline-flex;align-items:center;gap:6px;background:var(--grad-teal);color:#fff;font-size:12px;
  font-weight:800;padding:9px 14px;border-radius:10px;box-shadow:0 10px 22px -10px rgba(18,163,170,.6)}
.app-new svg{width:14px;height:14px}

.app-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:7px}
.kc{border:1px solid #eef3f4;border-radius:11px;padding:10px 11px;background:#fff}
.kc .kl{font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;color:#a7bcc2;font-weight:800}
.kc .kv{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:4px;line-height:1}
.kc .kv.tl{color:var(--teal-dp)}
.kc .kd{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;margin-top:6px;padding:2px 7px;border-radius:100px}
.kc .kd.up{color:#0c7e86;background:rgba(18,163,170,.1)}
.kc .kd.dn{color:#c0435a;background:rgba(192,67,90,.1)}

.app-chart{border:1px solid #eef3f4;border-radius:11px;padding:10px 14px 5px;background:#fff;margin-bottom:7px}
.app-chart .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.app-chart .ch b{font-size:13px;color:var(--ink);font-weight:800}
.app-chart .ch .pd{font-size:11px;color:var(--teal-dp);font-weight:800}
.app-chart .cwrap{position:relative;height:48px}
.app-chart svg{width:100%;height:48px;display:block}
.app-chart .cdot{position:absolute;right:-3px;top:0px;width:9px;height:9px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 4px rgba(23,190,199,.18);transform:scale(0);opacity:0;transition:transform .5s cubic-bezier(.2,1.4,.4,1),opacity .4s ease}
/* draw-on: left→right wipe reveal (works regardless of svg scaling) */
.js .app-chart svg{clip-path:inset(0 100% 0 0)}
.app-chart.anim svg{transition:clip-path 1.4s cubic-bezier(.4,0,.15,1)}
.app-chart.drawn svg{clip-path:inset(0 0 0 0)}
.app-chart.drawn .cdot{transform:scale(1);opacity:1;transition-delay:1.25s}

.app-list{border:1px solid #eef3f4;border-radius:12px;background:#fff;overflow:hidden}
.app-list .lh{display:flex;justify-content:space-between;align-items:center;padding:9px 15px;border-bottom:1px solid #eef3f4}
.app-list .lh b{font-size:12.5px;font-weight:800;color:var(--ink)}
.app-list .lh a{color:var(--teal-dp);font-size:11px;font-weight:800}
.lr{display:flex;align-items:center;gap:11px;padding:6px 15px;border-bottom:1px solid #f3f7f8}
.lr:last-child{border-bottom:0}
.lr .av{width:27px;height:27px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex-shrink:0}
.lr .nm{flex:1;min-width:0}
.lr .nm b{display:block;font-size:12.5px;color:var(--ink);font-weight:700;line-height:1.2}
.lr .nm span{font-size:10.5px;color:#a7bcc2;font-weight:600}
.lr .am{font-size:12.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.st-pill{font-size:9.5px;font-weight:800;padding:4px 9px;border-radius:100px;white-space:nowrap}
.st-pill.paid{color:#0c7e86;background:rgba(18,163,170,.12)}
.st-pill.over{color:#c0435a;background:rgba(192,67,90,.12)}
.st-pill.sent{color:#5f7a85;background:#eef3f4}

@media(max-width:960px){
  .app,.reveal.in .app{transform:none}
  .app:hover{transform:none}
}
/* Keep the 3 KPI cards fitting the narrow phone-width dashboard */
@media(max-width:560px){
  .app-kpis{gap:6px}
  .app-kpis>*{min-width:0}
  .kc{padding:9px 8px;min-width:0}
  .kc .kl{font-size:8px;letter-spacing:.04em}
  .kc .kv{font-size:13.5px}
  .kc .kd{font-size:8.5px;padding:2px 6px;gap:2px}
  .app-side{width:46px}
  .app-main{padding:11px 13px}
}