.dm{
  --dm-surface:#fff;
  --dm-line:rgba(76,111,255,.14);
  --dm-soft:rgba(76,111,255,.09);
  --dm-soft-2:rgba(76,111,255,.16);
  --dm-ink:#4C6FFF;
  --dm-grad:linear-gradient(135deg,#4C6FFF,#7C5CFF);
  --dm-text:#1E2447;
  --dm-dim:#6B7196;
  --dm-shadow:0 30px 60px -30px rgba(76,111,255,.55), 0 8px 18px -10px rgba(30,36,71,.18);
  --ease:cubic-bezier(.2,.8,.2,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
  position:relative; width:100%; max-width:340px; margin:0 auto;
  font-family:'Figtree', system-ui, sans-serif; color:var(--dm-text); text-align:left;
  transition:opacity .4s ease;
}
html[data-theme="dark"] .dm{
  --dm-surface:#171a2a;
  --dm-line:rgba(255,255,255,.08);
  --dm-soft:rgba(124,140,255,.12);
  --dm-soft-2:rgba(124,140,255,.2);
  --dm-ink:#8EA2FF;
  --dm-text:#E8EAF6;
  --dm-dim:#979DC4;
  --dm-shadow:0 30px 60px -30px rgba(0,0,0,.9), 0 8px 18px -10px rgba(0,0,0,.6);
}
.dm.is-reset{ opacity:0; }
.dm svg{ display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.dm-ic{
  width:30px; height:30px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,#1DB45A,#12994A);
  box-shadow:0 6px 14px -6px rgba(20,164,77,.7);
}
.dm-ic svg{ width:15px; height:15px; stroke-width:2.6; }

.dmw-toast, .dma-note{
  position:absolute; z-index:3; display:flex; align-items:center; gap:10px;
  padding:10px 14px 10px 10px; border-radius:14px; min-width:196px;
  background:var(--dm-surface); border:1px solid var(--dm-line);
  box-shadow:0 18px 36px -16px rgba(30,36,71,.35), 0 2px 6px rgba(30,36,71,.06);
  opacity:0; transform:translate3d(0,10px,0) scale(.94);
  transition:opacity .3s ease, transform .5s var(--pop);
}
html[data-theme="dark"] .dmw-toast, html[data-theme="dark"] .dma-note{ box-shadow:0 18px 36px -16px rgba(0,0,0,.9); }
.dmw-toast b, .dma-note b{ display:block; font-size:12.5px; font-weight:700; line-height:1.25; }
.dmw-toast small, .dma-note small{ display:block; font-size:11.5px; color:var(--dm-dim); line-height:1.3; margin-top:1px; }

.dmw-win{
  border-radius:14px; overflow:hidden; background:var(--dm-surface);
  border:1px solid var(--dm-line); box-shadow:var(--dm-shadow);
}
.dmw-bar{ display:flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-bottom:1px solid var(--dm-line); background:var(--dm-soft); }
.dmw-bar > i{ width:8px; height:8px; border-radius:50%; }
.dmw-bar > i:nth-child(1){ background:#FF8A80; } .dmw-bar > i:nth-child(2){ background:#FFD166; } .dmw-bar > i:nth-child(3){ background:#7BD88F; }
.dmw-url{
  flex:1; display:flex; align-items:center; gap:5px; height:19px; margin-left:10px; padding:0 8px;
  border-radius:6px; background:var(--dm-surface); font-size:10.5px; font-weight:600; color:var(--dm-dim);
}
.dmw-url svg{ width:10px; height:10px; stroke-width:2.4; color:#1DB45A; }
.dmw-page{ padding:16px 16px 18px; }

.dmw-nav{ display:flex; align-items:center; gap:8px; margin-bottom:20px; opacity:0; transform:translate3d(0,-4px,0); transition:opacity .4s ease, transform .5s var(--ease); }
.dmw-nav b{ width:28px; height:9px; border-radius:3px; background:var(--dm-grad); margin-right:auto; }
.dmw-nav span{ width:22px; height:5px; border-radius:3px; background:var(--dm-soft-2); }
.s1 .dmw-nav{ opacity:1; transform:none; }

.dmw-hero{ display:flex; align-items:center; gap:14px; }
.dmw-copy{ flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.dmw-copy i{ display:block; height:6px; border-radius:3px; background:var(--dm-soft-2); transform-origin:0 50%; transform:scaleX(0); transition:transform .6s var(--ease); }
.dmw-copy .l1{ width:96%; height:11px; background:var(--dm-text); opacity:.88; }
.dmw-copy .l2{ width:70%; height:11px; background:var(--dm-text); opacity:.88; transition-delay:.12s; }
.dmw-copy .l3{ width:88%; margin-top:4px; transition-delay:.24s; }
.dmw-copy .l4{ width:62%; transition-delay:.32s; }
.s2 .dmw-copy i{ transform:scaleX(1); }

.dmw-btn{
  position:relative; align-self:flex-start; margin-top:8px; padding:7px 12px; border-radius:8px;
  font-style:normal; font-size:10.5px; font-weight:700; color:#fff; background:var(--dm-grad);
  box-shadow:0 8px 16px -8px rgba(76,111,255,.8);
  transform:scale(0); transition:transform .5s var(--pop);
}
.s3 .dmw-btn{ transform:scale(1); }
.s6 .dmw-btn{ animation:dmPress .45s ease; }
.dmw-btn::after{
  content:''; position:absolute; left:70%; top:60%; width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%; background:rgba(255,255,255,.7); opacity:0; transform:scale(0);
}
.s6 .dmw-btn::after{ animation:dmRipple .6s ease-out; }
@keyframes dmPress{ 0%{ transform:scale(1); } 35%{ transform:scale(.9); } 100%{ transform:scale(1); } }
@keyframes dmRipple{ 0%{ opacity:.8; transform:scale(0); } 100%{ opacity:0; transform:scale(5); } }

.dmw-cursor{
  position:absolute; left:62%; top:52%; z-index:2; width:18px; height:18px;
  fill:var(--dm-text) !important; stroke:#fff !important; stroke-width:1.6 !important;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));
  opacity:0; transform:translate3d(120px,78px,0);
  transition:opacity .3s ease, transform 1s cubic-bezier(.45,0,.2,1);
}
html[data-theme="dark"] .dmw-cursor{ fill:#fff !important; stroke:#171a2a !important; }
.s5 .dmw-cursor{ opacity:1; transform:none; }
.s6 .dmw-cursor{ animation:dmClick .3s ease; }
@keyframes dmClick{ 50%{ transform:scale(.8); } }

.dmw-img{
  position:relative; width:40%; aspect-ratio:1 / 1.05; border-radius:10px; overflow:hidden;
  background:linear-gradient(160deg, #C9D4FF, #B7A8FF);
  opacity:0; transform:scale(.88); transition:opacity .5s ease .15s, transform .6s var(--pop) .15s;
}
html[data-theme="dark"] .dmw-img{ background:linear-gradient(160deg, #3A4380, #4B3A8F); }
.dmw-img .sun{ position:absolute; top:18%; right:20%; width:16px; height:16px; border-radius:50%; background:#fff; opacity:.85; }
.dmw-img .hill{ position:absolute; bottom:-18%; border-radius:50% 50% 0 0; background:rgba(255,255,255,.55); }
.dmw-img .h1{ left:-12%; width:80%; height:55%; }
.dmw-img .h2{ right:-20%; width:85%; height:42%; background:rgba(255,255,255,.35); }
.s3 .dmw-img{ opacity:1; transform:none; }

.dmw-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; }
.dmw-feats span{
  height:36px; border-radius:9px; background:var(--dm-soft); border:1px solid var(--dm-line);
  opacity:0; transform:translate3d(0,8px,0); transition:opacity .4s ease, transform .5s var(--ease);
}
.dmw-feats span:nth-child(2){ transition-delay:.08s; } .dmw-feats span:nth-child(3){ transition-delay:.16s; }
.s4 .dmw-feats span{ opacity:1; transform:none; }

.dmw-toast{ right:-18px; bottom:-26px; }
.s7 .dmw-toast{ opacity:1; transform:none; }

.dm-app{ padding-top:46px; }
.dma-card{
  padding:16px 16px 8px; border-radius:16px; background:var(--dm-surface);
  border:1px solid var(--dm-line); box-shadow:var(--dm-shadow);
}
.dma-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dma-t{ font:700 14px/1 'Sora', sans-serif; letter-spacing:-.01em; }
.dma-live{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#14A44D; }
.dma-live i{ position:relative; width:7px; height:7px; border-radius:50%; background:#1DB45A; }
.dma-live i::after{ content:''; position:absolute; inset:0; border-radius:50%; background:#1DB45A; animation:dmPulse 1.8s ease-out infinite; }
@keyframes dmPulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(3); opacity:0; } }

.dma-kpi{ padding:12px 14px; margin-bottom:6px; border-radius:12px; background:var(--dm-soft); }
.dma-kpi small{ display:block; font-size:11px; font-weight:600; color:var(--dm-dim); margin-bottom:3px; }
.dma-money{ display:inline-block; font:700 22px/1.1 'Sora', sans-serif; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.dma-money.is-up{ animation:dmMoney .7s ease; }
@keyframes dmMoney{ 0%{ color:inherit; } 25%{ color:#14A44D; } 100%{ color:inherit; } }

.dma-list{ list-style:none; margin:0; padding:0; }
.dma-list li{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px 10px;
  padding:10px 0; border-top:1px solid var(--dm-line);
}
.dma-list li:first-child{ border-top-color:transparent; }
.dma-list li.is-hit{ animation:dmRow .9s ease; }
@keyframes dmRow{ 0%,100%{ box-shadow:-8px 0 0 transparent, 8px 0 0 transparent; background:transparent; } 20%{ background:var(--dm-soft); box-shadow:-8px 0 0 var(--dm-soft), 8px 0 0 var(--dm-soft); } }
.dma-list .n{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; min-width:0; }
.dma-low{
  font-style:normal; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:999px;
  color:#B45309; background:rgba(245,158,11,.14);
  opacity:0; transform:scale(.8); transition:opacity .25s ease, transform .35s var(--pop);
}
html[data-theme="dark"] .dma-low{ color:#FBBF24; background:rgba(245,158,11,.16); }
.dma-list li.is-low .dma-low{ opacity:1; transform:none; }
.dma-list .q{ display:inline-block; font:700 14px/1 'Sora', sans-serif; font-variant-numeric:tabular-nums; text-align:right; min-width:2ch; }
.dma-list .q.is-down{ animation:dmDown .5s var(--ease); }
.dma-list .q.is-up{ animation:dmUp .5s var(--ease); }
@keyframes dmDown{ 0%{ transform:translateY(-7px); opacity:0; color:#E0393E; } 60%{ color:#E0393E; } 100%{ transform:none; opacity:1; } }
@keyframes dmUp{ 0%{ transform:translateY(7px); opacity:0; color:#14A44D; } 60%{ color:#14A44D; } 100%{ transform:none; opacity:1; } }
.dma-list .bar{ grid-column:1 / -1; height:5px; border-radius:3px; background:var(--dm-soft-2); overflow:hidden; }
.dma-list .bar i{
  display:block; height:100%; border-radius:3px; background:var(--dm-grad);
  transform-origin:0 50%; transform:scaleX(.7); transition:transform .7s var(--ease), background-color .3s ease;
}
.dma-list li.is-low .bar i{ background:linear-gradient(90deg,#F59E0B,#FBBF24); }

.dma-note{ top:0; right:-20px; }
.dma-note.is-show{ opacity:1; transform:none; }
.dma-note.is-restock .dm-ic{ background:var(--dm-grad); box-shadow:0 6px 14px -6px rgba(76,111,255,.8); }
.dma-note:not(.is-restock) .dm-ic svg{ transform:none; }

.dmb-win{
  display:flex; flex-direction:column; border-radius:20px; overflow:hidden;
  background:var(--dm-surface); border:1px solid var(--dm-line); box-shadow:var(--dm-shadow);
}
.dmb-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--dm-line); }
.dmb-av{
  width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:#fff; background:linear-gradient(135deg,#1DB45A,#0E8F43);
}
.dmb-av svg{ width:16px; height:16px; }
.dmb-head b{ display:block; font-size:13px; font-weight:700; line-height:1.2; }
.dmb-head small{ display:block; font-size:11px; font-weight:600; color:#14A44D; line-height:1.2; }

.dmb-body{
  height:244px; padding:6px 12px 12px; display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; background:
    radial-gradient(circle at 20% 30%, var(--dm-soft), transparent 45%),
    radial-gradient(circle at 80% 80%, var(--dm-soft), transparent 45%);
  -webkit-mask:linear-gradient(transparent, #000 22px); mask:linear-gradient(transparent, #000 22px);
}
.dmb-row{
  display:flex; position:relative; max-height:0; margin-top:0; opacity:0; transform:translate3d(0,8px,0) scale(.97);
  transition:max-height .4s var(--ease), margin-top .4s var(--ease), opacity .3s ease .05s, transform .45s var(--pop) .05s;
}
.dmb-row.in{ justify-content:flex-start; transform-origin:0 100%; }
.dmb-row.out{ justify-content:flex-end; transform-origin:100% 100%; }
.dm-bot.s1 .r1,
.dm-bot.s2:not(.s3) .r-t1,
.dm-bot.s3 .r3,
.dm-bot.s4 .r4,
.dm-bot.s5:not(.s7) .r5,
.dm-bot.s7 .r7,
.dm-bot.s8:not(.s9) .r-t2,
.dm-bot.s9 .r9{ max-height:90px; margin-top:8px; opacity:1; transform:none; }

.dmb-msg{
  max-width:80%; padding:8px 12px; border-radius:16px; font-size:12.5px; font-weight:500; line-height:1.4;
}
.in .dmb-msg{ background:var(--dm-soft-2); border-bottom-left-radius:5px; }
.out .dmb-msg{ color:#fff; background:var(--dm-grad); border-bottom-right-radius:5px; }
.r9 .dmb-msg{ padding-right:34px; }
.dmb-ticks{ position:absolute; right:10px; bottom:8px; width:17px; height:11px; stroke:#BFE9FF !important; stroke-width:2 !important; }

.dmb-typing{ display:flex; gap:4px; padding:11px 13px; }
.out .dmb-typing{ background:var(--dm-soft-2); }
.dmb-typing i{ width:6px; height:6px; border-radius:50%; background:var(--dm-ink); animation:dmDot 1s ease-in-out infinite; }
.dmb-typing i:nth-child(2){ animation-delay:.15s; } .dmb-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes dmDot{ 0%,100%{ transform:translateY(0); opacity:.45; } 50%{ transform:translateY(-3px); opacity:1; } }

.dmb-prod{
  display:flex; align-items:center; gap:10px; padding:8px 12px 8px 8px; border-radius:14px; border-bottom-right-radius:5px;
  background:var(--dm-surface); border:1px solid var(--dm-line);
  box-shadow:0 8px 18px -12px rgba(30,36,71,.4);
}
.dmb-img{
  width:40px; height:40px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:#fff; background:linear-gradient(135deg,#34C77B,#12994A);
}
.dmb-img svg{ width:20px; height:20px; }
.dmb-pt b{ display:block; font-size:12.5px; font-weight:700; line-height:1.2; }
.dmb-pt small{ display:block; font-size:11px; color:var(--dm-dim); line-height:1.3; margin-top:2px; }

.dmb-quick{ display:flex; gap:6px; }
.dmb-qb{
  padding:6px 11px; border-radius:999px; font-size:11.5px; font-weight:700;
  color:var(--dm-ink); border:1px solid var(--dm-soft-2); background:var(--dm-surface);
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
.dm-bot.s6 .qb1{ background:var(--dm-ink); color:#fff; border-color:var(--dm-ink); transform:scale(.94); }

.dmb-input{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--dm-line); }
.dmb-input span{
  flex:1; display:flex; align-items:center; height:32px; padding:0 14px; border-radius:16px;
  background:var(--dm-soft); font-size:11.5px; color:var(--dm-dim);
}
.dmb-input i{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--dm-grad); }
.dmb-input i svg{ width:14px; height:14px; margin-left:-1px; }

@media (max-width:760px){
  .dmw-toast{ right:-6px; bottom:-22px; }
  .dma-note{ right:-6px; }
}
@media (max-width:380px){
  .dmw-toast, .dma-note{ min-width:0; }
}

@media (prefers-reduced-motion:reduce){
  .dm, .dm *{ transition:none !important; animation:none !important; }
}