.demo-wrap{max-width:1310px;margin:auto;padding:12px 22px 25px}.demo-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.demo-head h1{font-size:clamp(30px,5vw,50px);margin:7px 0}.demo-head p{margin:0;color:#486054}.demo-note{background:#e4ede3;border:1px solid #cddfcc;padding:11px 15px;border-radius:9px;font-size:14px}.demo-shell{background:#fff;border:1px solid #d8e2dc;min-height:500px;border-radius:14px;display:grid;grid-template-columns:230px minmax(0,1fr);overflow:hidden}.demo-shell aside{background:#142d23;color:#fff;padding:15px;min-width:0}.shop-badge{display:flex;gap:10px;align-items:center;margin-bottom:16px}.shop-badge small{display:block;color:#bdd2c3;font-size:11px}.shop-icon{display:grid;place-items:center;background:#cbeb9c;color:#20372d;border-radius:9px;font-weight:800;width:34px;height:34px;flex:none}#demo-nav{display:grid;gap:4px}.demo-nav-item{display:flex;align-items:center;gap:8px;color:#d8e8df;background:transparent;border:0;text-align:left;text-decoration:none;padding:8px 10px;border-radius:7px;font:inherit;font-size:14px;cursor:pointer}.demo-nav-item span{color:#9ebca9;font-size:11px}.demo-nav-item:hover,.demo-nav-item[aria-current]{background:#2f4b3d;color:#fff}.demo-content{padding:19px 21px;min-width:0}.screen-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}.screen-top h2{font-size:30px;margin:4px 0}.screen-top p:not(.eyebrow){font-size:14px;color:#52655a;margin:0}.demo-pill{font-size:11px;background:#e2eee2;color:#284f39;padding:6px 9px;border-radius:20px;font-weight:750;white-space:nowrap}.demo-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.demo-stat{display:grid;gap:5px;border:1px solid #d8e2dc;background:#f6f8f5;border-radius:8px;padding:12px;font-size:13px;color:#52655a}.demo-stat strong{font-size:19px;color:#183e2a}.demo-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px}.demo-box{border:1px solid #d8e2dc;border-radius:9px;padding:12px;min-width:0;margin-bottom:10px}.demo-box h3{font-size:16px;margin:0 0 8px}.demo-box p{font-size:14px;margin:6px 0}.scroll-table{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:8px 7px;border-bottom:1px solid #e2e9e2;white-space:nowrap}th{color:#496254}td:last-child,th:last-child{text-align:right}.row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0}.secondary{border:1px solid #aac1af;background:#fff;color:#204d36;border-radius:7px;font-weight:700;padding:8px 11px;cursor:pointer;white-space:nowrap}.secondary:hover{background:#eaf2e9}.demo-content form{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin:10px 0}.demo-content form label{display:grid;gap:4px;min-width:90px}.demo-content form input,.demo-content select{font:inherit;font-size:14px;margin:0;border:1px solid #aabdb0;border-radius:7px;padding:8px;color:#183e2a;background:#fff}.feedback{font-size:13px;color:#275d43;margin:9px 0 0}.feedback:empty{display:none}.feedback:not(:empty){background:#edf5eb;padding:8px 10px;border-radius:8px}.receipt-preview{background:#f7faf6;border:1px dashed #a6bfa8;border-radius:7px;padding:10px 12px}.demo-list{font-size:14px;padding-left:20px;line-height:1.7;margin:6px 0}.status-line{font-size:13px;color:#52655a}
@media(max-width:780px){.demo-shell{grid-template-columns:1fr}.demo-shell aside{padding:10px}.shop-badge{margin-bottom:8px}#demo-nav{display:flex;overflow-x:auto}.demo-nav-item{white-space:nowrap;padding:7px 9px}.demo-grid{grid-template-columns:1fr}.demo-content{padding:13px}.demo-head{align-items:flex-start}.demo-wrap{padding-inline:12px}}
@media(max-width:420px){.demo-head{flex-direction:column}.demo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-stat{padding:9px}.demo-stat strong{font-size:16px}}