/* sy21: layout only. Card, button, palette and type derive from the existing UI kit. */
#device-host .di-widget{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--pd-surface);border-color:var(--pd-line);cursor:default;isolation:isolate;overflow:hidden}
.di-widget *{box-sizing:border-box}.di-head{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;min-height:var(--space-7);padding:0;margin:0;border:0;background:none;color:var(--pd-ink);text-align:left;font-family:var(--font-ui)}button.di-head{min-height:var(--control-m);margin-top:calc(-1*var(--space-3));margin-bottom:calc(-1*var(--space-3));cursor:pointer}.di-title{font-size:var(--text-16);line-height:var(--space-7);font-weight:var(--weight-bold)}.di-head-end{display:flex;align-items:center;gap:var(--space-4);color:var(--pd-muted)}.di-count{display:grid;place-items:center;width:var(--space-7);height:var(--space-7);min-width:var(--space-7);border-radius:7px;background:#242830;color:var(--pd-ink);font:700 var(--text-12)/var(--space-5) var(--font-ui);font-variant-numeric:tabular-nums}.di-row{position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-5);min-width:0}.di-art{display:grid;place-items:center;width:var(--di-art-size);height:var(--di-art-size);max-width:100%;flex:none;position:relative;color:var(--pd-dim)}.di-art>*{max-width:100%;max-height:100%;object-fit:contain}.di-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);flex:1;min-width:0;text-align:left}.di-label,.di-detail,.di-note{font:400 var(--text-12)/var(--space-5) var(--font-ui);color:var(--pd-muted)}.di-name{font:700 var(--text-16)/var(--space-6) var(--font-ui);color:var(--pd-ink);overflow-wrap:anywhere}.di-copy--large .di-name{font-size:var(--text-20);line-height:var(--space-7)}#device-host .di-widget>.pd-btn{position:relative;z-index:1;flex:none}.di-open:focus-visible{outline:2px solid var(--pd-ink);outline-offset:3px}.di-note{display:flex;align-items:center;gap:var(--space-3)}.di-note i{width:6px;height:6px;border-radius:50%;background:var(--pd-red)}
/* 01: safe widget's illustration / copy / full-width button. */
.di-v1 .di-row{min-height:96px}
/* 02: wallet menu row; one continuous compact list surface. */
.di-list-row{display:flex;align-items:center;gap:var(--space-4);min-width:0;width:100%;padding:var(--space-4) 0 0;border:0;border-top:1px solid var(--pd-line);background:none;color:var(--pd-muted);text-align:left;cursor:pointer}.di-list-row>svg{flex:none}.di-v2 .di-detail{display:none}
/* 03: wide task tile, copy leads and illustration ends the row. */
.di-v3 .di-detail{margin-top:var(--space-2)}
/* 04: title first, illustration and native action underneath. */
.di-low-row{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:var(--space-5)}.di-low-action{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}.di-v4>.di-copy .di-detail{display:none}
/* 05: standard reward card with a centered item. */
.di-center{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.di-center .di-copy{align-items:center;text-align:center}.di-v5 .di-detail{display:none}
/* 06: the selected wallet's aurora print, under the same opaque card. */
.di-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.28;mask-image:linear-gradient(100deg,transparent 15%,#000 100%)}.di-atmosphere canvas{width:100%;height:100%;position:absolute;inset:0}.di-v6 .di-row{min-height:112px}
/* 07: balance block's large metric and a separate latest-item column. */
.di-balance{display:grid;grid-template-columns:32% minmax(0,1fr);gap:var(--space-5);align-items:center}.di-total{display:flex;flex-direction:column;gap:var(--space-2)}.di-total>strong{font:700 var(--text-40)/var(--text-48) var(--font-ui);color:var(--pd-ink)}.di-total>span{font:400 var(--text-12)/var(--space-5) var(--font-ui);color:var(--pd-muted)}.di-balance-item{border-left:1px solid var(--pd-line);padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}.di-v7 .di-detail{display:none}
/* 08: latest item with the wallet's two divided counters below. */
.di-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--pd-line);padding-top:var(--space-4)}.di-stats>span{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-right:var(--space-5)}.di-stats>span+span{border-left:1px solid var(--pd-line);padding-left:var(--space-5);padding-right:0}.di-stats strong{font:700 var(--text-16)/var(--space-6) var(--font-ui)}
/* 09: the existing reward-received row component. */
#device-host .di-result.sy-reward-row{animation:none;min-height:80px;margin:0;background:var(--pd-surface);border-color:var(--pd-line);padding:var(--space-4);border-radius:var(--radius-md);gap:var(--space-4)}.di-result .di-art{transform:none}.di-result .sy-reward-art>span{transform:none}
/* 10: latest large item and two supporting inventory cells. */
.di-collection{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:var(--space-4)}.di-collection-main{display:grid;place-items:center;min-height:112px;border:1px solid var(--pd-line);border-radius:var(--radius-md)}.di-collection-side{display:flex;flex-direction:column;gap:var(--space-3)}.di-collection-slot{display:grid;place-items:center;height:52px;border:1px solid var(--pd-line);border-radius:var(--radius-sm);overflow:hidden}.di-v10 .di-detail{display:none}
@media(max-width:350px){.di-v3 .di-art{width:80px;height:80px}.di-v6 .di-art{width:96px;height:96px}.di-row{gap:var(--space-4)}.di-low-row{grid-template-columns:64px minmax(0,1fr);gap:var(--space-4)}.di-low-row>.di-art{width:64px;height:64px}.di-balance{grid-template-columns:30% minmax(0,1fr);gap:var(--space-4)}.di-balance-item{padding-left:var(--space-4)}}
@media(prefers-reduced-motion:reduce){.di-widget *{animation:none!important;transition:none!important}}