.dashboard-example .phone-screen {
  min-height: 465px; padding: 14px 12px 20px;
  background: linear-gradient(rgba(4,13,9,.68),rgba(4,13,9,.87)),url("../CONTROL_WALLET_APP/assets/forest-theme-bg.png") center/cover;
}
.dashboard-example .phone-status { padding-bottom: 8px; border-bottom: 1px solid #61e7e6; font-size: 8px; }
.dashboard-demo-profile { display: grid; grid-template-columns: 39px minmax(0,1fr) 34px; align-items: center; gap: 10px; margin: 16px 0 17px; }
.dashboard-demo-avatar { width: 39px; height: 39px; border: 1px solid #67e3e8; border-radius: 50%; display: grid; place-items: center; font-weight: 850; font-size: 13px; color: #82edee; background: #123d3a; box-shadow: 0 0 14px rgba(100,217,233,.18); }
.dashboard-demo-greeting time { display: table; margin-bottom: 5px; padding: 3px 8px; border-radius: 12px; background: linear-gradient(90deg,#39e5b0,#70e4fc); color: #06201e; font-size: 8px; font-weight: 850; }
.dashboard-demo-greeting > span { display: block; color: #c4d7d6; font-size: 16px; font-weight: 700; line-height: 1.2; }
.dashboard-demo-greeting strong { display: block; margin-top: 3px; color: #73eaff; font-size: 18px; line-height: 1.08; letter-spacing: -.02em; }
.dashboard-demo-menu { position: relative; display: grid; place-items: center; height: 34px; border: 1px solid #67cbd4; border-radius: 7px; font-size: 22px; color: #8df6fc; background: rgba(54,164,170,.17); box-shadow: 0 0 20px rgba(100,217,233,.18); }
.dashboard-demo-menu i { position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ff665d; }
.dashboard-demo-intro { margin: 0 0 12px; padding: 11px; border: 1px solid rgba(100,217,233,.33); border-radius: 7px; background: rgba(3,13,15,.82); color: #c2dee1; font-size: 11px; line-height: 1.45; font-weight: 700; }
.dashboard-demo-carousel { display: flex; gap: 8px; overflow: hidden; }
.dashboard-demo-card { flex: 0 0 95%; min-width: 0; padding: 13px 12px; border: 1px solid rgba(255,135,76,.44); border-radius: 9px; background: linear-gradient(130deg,rgba(97,45,25,.3),rgba(16,22,28,.96) 70%); }
.dashboard-demo-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.dashboard-demo-card-head h3 { margin: 0; font-size: 16px; line-height: 1.2; color: #dae4e5; letter-spacing: -.02em; }
.dashboard-demo-rating { width: 12px; height: 12px; border-radius: 50%; background: #ff954c; box-shadow: 0 0 0 4px rgba(255,139,72,.13),0 0 12px #ff8b48; }
.dashboard-demo-card-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
.dashboard-demo-card dl { display: grid; gap: 5px; margin: 0; min-width: 0; }
.dashboard-demo-card dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 3px; }
.dashboard-demo-card dt { color: #a0b8c0; font-size: 9px; font-weight: 700; }
.dashboard-demo-card dd { margin: 0; color: #e2e9eb; font-size: 8px; font-weight: 850; white-space: nowrap; }
.dashboard-demo-card sup { font-size: .65em; color: #ffd577; }
.dashboard-demo-meter-labels { display: flex; justify-content: space-between; margin-top: 9px; color: #9bb4c0; font-size: 9px; }
.dashboard-demo-meter-labels span:last-child { text-align: right; }.dashboard-demo-meter-labels strong { display: block; color: #e2ecee; font-size: 10px; }
.dashboard-demo-meter { height: 5px; margin-top: 3px; border-radius: 3px; overflow: hidden; background: #ff6c61; }
.dashboard-demo-meter > span { display: block; height: 100%; width: 92%; background: #64d9ff; }
.dashboard-demo-timeline { position: relative; height: 31px; margin-top: 6px; }
.dashboard-demo-timeline > span { display: block; height: 5px; border-radius: 3px; background: linear-gradient(90deg,#16f26a 0 var(--cycle-end),#ffc72c var(--cycle-end) 100%); }
.dashboard-demo-triangle { position: absolute; top: -8px; left: var(--virtual-pos); transform: translateX(-50%); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid var(--virtual-marker-color); }
.dashboard-demo-tolerance { position: absolute; top: 2.5px; left: var(--tolerance-pos); width: 2px; height: 14px; border-radius: 9px; background: #fff; box-shadow: 0 0 6px #ffffff99; transform: translate(-50%,-50%); }
.virtual-good { --virtual-marker-color: #16f26a; }
.virtual-late { --virtual-marker-color: #ff5b5b; }
.virtual-wait, .virtual-expired { --virtual-marker-color: #ffda40; }
.dashboard-demo-card > p { margin: 7px 0 0; font-size: 10px; color: #9fb8c8; }
.dashboard-demo-next { flex: 0 0 92%; min-height: 100%; border: 1px solid rgba(183,95,209,.32); border-radius: 9px; background: linear-gradient(120deg,rgba(105,43,118,.26),#10181e); }
.dashboard-demo-disclaimer { margin: 15px 0 0; text-align: center; color: #8aa7a0; font-size: 8px; }

/* Complete dashboard previews share the same frame and fade as one screen. */
.dashboard-demo-showcase { min-width: 0; max-width: 400px; width: 100%; margin: auto; }
.dashboard-example { width: min(360px, 100%); }
.dashboard-demo-slides { display: grid; overflow: hidden; border-radius: 28px; background: #08100d; }
.dashboard-example .dashboard-demo-slide {
  grid-area: 1 / 1; width: 100%; min-width: 0; min-height: 680px;
  display: flex; flex-direction: column; padding: 12px 12px 0;
  background: linear-gradient(rgba(7,14,18,.57),rgba(7,14,18,.77)),var(--demo-background) center/cover;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .75s ease-in-out, visibility 0s linear .75s;
}
.dashboard-example .dashboard-demo-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.dashboard-demo-slide[data-theme="forest"] { --demo-background: url('../CONTROL_WALLET_APP/assets/forest-theme-bg.png'); }
.dashboard-demo-slide[data-theme="mountain"] { --demo-background: url('../CONTROL_WALLET_APP/assets/mountain-theme-bg.png'); }
.dashboard-demo-slide[data-theme="platinum"] { --demo-background: url('../CONTROL_WALLET_APP/assets/platinum-theme-bg.png'); }
.dashboard-demo-slide[data-theme="lamborguini"] { --demo-background: url('../CONTROL_WALLET_APP/assets/lamborguini-theme-bg.png'); }
.dashboard-demo-slide .dashboard-demo-profile { grid-template-columns: 44px minmax(0,1fr) 34px; margin: 12px 0 16px; }
.dashboard-demo-slide .dashboard-demo-avatar { width: 44px; height: 44px; background-image: url('demo-avatars.png'); background-size: 200% 200%; background-repeat: no-repeat; }
.dashboard-demo-avatar.portrait-0 { background-position: 0 0; }
.dashboard-demo-avatar.portrait-1 { background-position: 100% 0; }
.dashboard-demo-avatar.portrait-2 { background-position: 0 100%; }
.dashboard-demo-avatar.portrait-3 { background-position: 100% 100%; }
.dashboard-demo-slide .dashboard-demo-card { min-height: 198px; border-color: color-mix(in srgb, var(--demo-rank) 40%, transparent); background: linear-gradient(135deg,color-mix(in srgb,var(--demo-rank) 15%,transparent),rgba(16,22,28,.96) 70%); }
.dashboard-demo-slide .dashboard-demo-rating { background: var(--demo-rank); box-shadow: 0 0 0 4px color-mix(in srgb,var(--demo-rank) 14%,transparent),0 0 12px var(--demo-rank); }
.dashboard-demo-slide .dashboard-demo-meter > span { width: var(--demo-available); }
.dashboard-demo-slide .dashboard-demo-meter { background: linear-gradient(90deg,rgba(255,91,91,.96),rgba(255,48,48,.72)); }
.dashboard-demo-slide .dashboard-demo-meter > span { background: #2f9bff; border-radius: inherit; }
.dashboard-demo-debt-marker { position: absolute; top: 2.5px; left: var(--marker-pos); width: 9px; height: 9px; background: #ff3030; border: 1px solid #ff9999; box-shadow: 0 0 8px #ff3030; transform: translate(-50%,-50%); }
.dashboard-demo-debt-marker.marker-normal { border-radius: 50%; }
.dashboard-demo-debt-marker.marker-msi { border-radius: 1px; }
.marker-msi::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #ffd447; box-shadow: 0 0 5px #ffd447; transform: translate(-50%,-50%); }
.dashboard-demo-debt-marker.marker-combined { border-radius: 1px; background: #321044; border-color: #be97dc; transform: translate(-50%,-50%) rotate(45deg); }
.dashboard-demo-slide.is-active .marker-combined { animation: demoCombinedDebtMsi 3s ease-in-out infinite; }
.marker-combined::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: #25d9ff; box-shadow: 0 0 7px #25d9ff; transform: translate(-50%,-50%); }
.dashboard-demo-slide.is-active .marker-combined::after { animation: demoMsiCenter 3s ease-in-out infinite; }
@keyframes demoCombinedDebtMsi {
  0%,18%,100% { border-radius: 50%; background: #ff3030; border-color: #ff7070; transform: translate(-50%,-50%) rotate(0deg) scale(.9); box-shadow: 0 0 8px rgba(255,48,48,.82); }
  9% { border-radius: 50%; background: #ff3030; border-color: #ffb0b0; transform: translate(-50%,-50%) rotate(0deg) scale(1.1); box-shadow: 0 0 11px #ff3030; }
  30%,50% { border-radius: 1.5px; background: #ff1010; border-color: #ffb0b0; transform: translate(-50%,-50%) rotate(0deg) scale(.94); box-shadow: 0 0 8px #ff1010; }
  40% { border-radius: 1.5px; background: #ff1010; border-color: #ffb0b0; transform: translate(-50%,-50%) rotate(0deg) scale(1.1); box-shadow: 0 0 11px #ff2020; }
  64%,88% { border-radius: 1px; background: #321044; border-color: #a67cc7; transform: translate(-50%,-50%) rotate(45deg) scale(.94); box-shadow: 0 0 8px rgba(79,28,108,.88); }
  76% { border-radius: 1px; background: #321044; border-color: #be97dc; transform: translate(-50%,-50%) rotate(45deg) scale(1.08); box-shadow: 0 0 10px rgba(96,36,130,.96); }
}
@keyframes demoMsiCenter {
  0%,22%,58%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.55); }
  30%,50%,64%,88% { opacity: .72; transform: translate(-50%,-50%) scale(.72); }
  40%,76% { opacity: 1; transform: translate(-50%,-50%) scale(1.16); }
}
.dashboard-demo-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.dashboard-demo-summary > div { position: relative; min-width: 0; padding: 11px 9px; border: 1px solid rgba(128,177,193,.18); border-radius: 7px; background: rgba(5,14,20,.79); }
.dashboard-demo-summary span, .dashboard-demo-summary strong, .dashboard-demo-summary small { display: block; }
.dashboard-demo-summary span { color: #d8e4e8; font-size: 9px; font-weight: 750; }
.dashboard-demo-summary strong { margin-top: 7px; color: #e7f3f4; font-size: 12px; line-height: 1.1; }
.dashboard-demo-summary small { margin-top: 5px; color: #71efc7; font-size: 8px; font-weight: 700; }
.dashboard-demo-summary sup, .dashboard-demo-credit sup { color: #f2cf6f; font-size: .6em; }
.dashboard-demo-summary .dashboard-demo-ai { grid-column: 1 / -1; }
.dashboard-demo-summary .dashboard-demo-ai strong { color: #44f0b6; font-size: 20px; margin-top: 3px; }
.dashboard-demo-debt-summary i { position: absolute; top: 6px; right: 9px; color: #71efc7; font-style: normal; font-size: 20px; }
.dashboard-demo-credit { display: grid; gap: 12px; margin: 8px 0 12px; padding: 11px 9px; border: 1px solid rgba(100,217,233,.3); border-radius: 7px; background: rgba(4,15,23,.86); }
.dashboard-demo-credit-amounts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.dashboard-demo-credit-amounts span { display: block; color: #c2d4dc; font-size: 9px; font-weight: 750; }
.dashboard-demo-credit .dashboard-demo-credit-amounts b { display: block; margin-top: 5px; font-size: clamp(13px, 3.5vw, 17px); font-variant-numeric: tabular-nums; }
.dashboard-demo-credit-free b { color: #2f9bff; }
.dashboard-demo-credit-used { text-align: right; }
.dashboard-demo-credit-used b { color: #ff666b; }
.dashboard-demo-credit-legend { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 8px; color: #9fb8c8; }
.dashboard-demo-credit-bar { height: 5px; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg,#ff5b5b,#ed303f); }
.dashboard-demo-credit-bar > span { display: block; height: 100%; width: var(--total-free); background: #2f9bff; }
.dashboard-demo-credit strong { display: block; font-size: 10px; }.dashboard-demo-credit small { display: block; color: #8fa9b7; margin-top: 3px; font-size: 7px; }.dashboard-demo-credit b { font-size: 11px; white-space: nowrap; }
.dashboard-demo-android { display: flex; align-items: center; justify-content: space-evenly; margin: auto -12px 0; padding: 10px 25px; color: #a4b2b8; background: rgba(8,13,17,.9); border-top: 1px solid rgba(190,220,225,.08); font-size: 13px; }
.dashboard-demo-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 17px; }
.dashboard-demo-dots { display: flex; gap: 10px; }.dashboard-demo-dots button { width: 24px; height: 24px; padding: 7px; background: transparent; border: 0; cursor: pointer; }
.dashboard-demo-dots button::after { content: ''; display: block; width: 9px; height: 9px; border: 1px solid var(--green); border-radius: 50%; background: transparent; }
.dashboard-demo-dots button[aria-pressed="true"]::after { background: var(--green); box-shadow: 0 0 10px rgba(44,230,154,.3); }
[data-demo-pause] { padding: 6px 10px; min-height: 32px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.dashboard-demo-controls button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.dashboard-demo-caption { margin: 9px 0 0; text-align: center; color: var(--text); font-size: 12px; }
.dashboard-demo-showcase .dashboard-demo-disclaimer { margin: 8px 0 0; font-size: 9px; }
.dashboard-demo-showcase.is-paused .marker-combined, .dashboard-demo-showcase.is-paused .marker-combined::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .dashboard-example .dashboard-demo-slide { transition: none; }
  .dashboard-demo-slide.is-active .marker-combined, .dashboard-demo-slide.is-active .marker-combined::after { animation: none; }
}
@media(max-width:980px) { .dashboard-demo-showcase { order: 2; } }