.dni-page .dni-panel { max-width:none; }
.dni-width-controls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin:0 auto 16px; color:var(--xepy-muted); font-size:12px; }
.dni-width-controls input { width:180px; max-width:40vw; accent-color:var(--xepy-blue); }
.dni-width-controls output { min-width:52px; font-variant-numeric:tabular-nums; }
.dni-width-controls button { padding:5px 10px; border:1px solid var(--xepy-border); border-radius:3px; background:var(--xepy-black); color:var(--xepy-text); font:inherit; cursor:pointer; }
.dni-width-controls button:hover { background:var(--xepy-hover); color:#fff; }
.dni-resizable { width:min(950px,100%); min-width:min(320px,100%); max-width:100%; margin:0 auto; resize:horizontal; overflow:auto; container-type:inline-size; padding-bottom:9px; }
.dni-resizable .dni-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.dni-resizable .dni-card { min-width:0; overflow-wrap:anywhere; }
@container(max-width:760px) {
 .dni-resizable .dni-grid { grid-template-columns:1fr; }
 .dni-resizable .dni-card { min-height:0; border-right:0; border-bottom:1px solid var(--xepy-border); }
 .dni-resizable .dni-card:last-child { border-bottom:0; }
}