
:root{ --pad-xs:.5rem; --pad-sm:.75rem; --pad-md:1rem; --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.08); }
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; line-height:1.35; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial; }
.container, .wrap, main{ max-width:100%; margin:0 auto; padding-inline: var(--pad-sm); }
.item-card{ border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid rgba(125,125,125,.18); background:#fff; padding:var(--pad-sm); margin-block:.6rem; display:grid; grid-template-columns:1fr auto; gap:.6rem .8rem; align-items:start; }
.item-card .title{ font-size: clamp(15px,3.8vw,18px); font-weight:650; line-height:1.2; }
.item-card .qty{ font-variant-numeric: tabular-nums; font-weight:700; font-size: clamp(16px,5vw,20px); justify-self:end; align-self:center; }
.grid, .cards{ display:grid; grid-template-columns:1fr; gap:.75rem }
@media(min-width:768px){ .container, .wrap, main{ max-width:900px } .grid, .cards{ grid-template-columns: repeat(2,minmax(0,1fr)) } }
@media(min-width:1024px){ .container, .wrap, main{ max-width:1100px } .grid, .cards{ grid-template-columns: repeat(3,minmax(0,1fr)) } }

html, body{ background: var(--page-bg, #eef2f7); }
.detail-modal-wrapper{ background: rgba(15,23,42,.22); backdrop-filter: saturate(120%) blur(3px); }
html.dark .detail-modal-wrapper{ background: rgba(0,0,0,.40); }
.detail-modal-card .detail-scroll{ max-height:62vh; overflow:auto; border:1px solid rgba(120,120,120,.22); border-radius:12px; background: rgba(255,255,255,.55); }
html.dark .detail-modal-card .detail-scroll{ background: rgba(16,23,42,.45); border-color: rgba(255,255,255,.12); }
@media(max-width:520px){
  .detail-modal-card table th, .detail-modal-card table td{ padding:.28rem .32rem; font-size:11.5px }
  .detail-modal-card input.qty-input{ width:2.6rem; min-width:2.6rem; padding:.32rem .28rem; font-size:13px }
  .detail-modal-card .actions .btn{ padding:.5rem .65rem; font-size:12.5px }
}
@media (prefers-color-scheme: dark){ :root{ --page-bg:#0b0f14 } }
