.pack-ui {
  color: #17191b;
  border: 1px solid #e1e5e5;
  border-radius: 24px;
  padding: clamp(16px, 3vw, 28px);
  gap: 14px;
  box-shadow: 0 12px 32px #17282712;
  margin: 0;
}

.pack-ui h2 { font-size: 21px; }
.pack-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.pack-heading button { width: auto; }
#pack-rule { color: #50565b; }
#pack-summary { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.pack-breakdown { margin: 0; }
.pack-breakdown > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; }
.pack-breakdown dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.pack-breakdown > div:last-child { border-top: 1px solid #e1e5e5; margin-top: 4px; padding-top: 9px; font-size: 15px; font-weight: bold; }
.pack-progress-card { display: grid; align-content: center; gap: 12px; padding: 14px; border-radius: 16px; background: #f1f3f4; }
.pack-progress { display: block; width: 100%; height: 10px; accent-color: #181a1b; }
.pack-actions { align-items: center; }
.pack-actions button { border-radius: 999px; padding-inline: 16px; }
.pack-actions #pack-quote:enabled { background: #181a1b; color: #fff; border-color: #181a1b; }
.pack-ui #pack-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 0; }
.pack-ui #pack-items li { position: relative; flex-direction: column; justify-content: flex-start; text-align: center; background: #fff; border: 1px solid #303335; border-radius: 12px; padding: 10px 6px; overflow-wrap: anywhere; }
#pack-items img { width: 40px; height: 40px; object-fit: contain; background: #e9edec; border-radius: 6px; }
.pack-ui #pack-items .pack-remove { position: absolute; inset: 3px auto auto 3px; min-height: 24px; padding: 0 5px; }
#grid article:has(.pack-check :checked) {
  border-color: #15803d;
  box-shadow: inset 0 0 0 1px #15803d, 0 8px 18px #14532d52;
}
#grid article .pack-check { background: #f1f3f4; color: #242628; }
#grid article .pack-check:has(:checked) { background: #e4f4e9; color: #14532d; }
#grid .pack-check input { accent-color: #15803d; }

@media (prefers-reduced-motion: no-preference) {
  #grid article { transition: border-color .18s, box-shadow .18s; }
}

#grid article { min-height: 0; gap: 4px; padding: 9px; overflow-wrap: anywhere; }
#grid article h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.35; }
#grid article :is(.english, .en, .classification, .meta) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  line-height: 1.4;
}
#grid article .description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.4;
}
#grid article .preview { height: 64px; padding: 6px; }
#grid article .preview img { max-height: 52px; }
#grid article .previews { margin-bottom: 0; }
#grid article .file-format { display: none; }
#grid article .details-btn { min-height: 30px; padding-block: 3px; }

body { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
#pack-bar {
  position: fixed;
  z-index: 3;
  inset: auto 10px max(10px, env(safe-area-inset-bottom));
  max-width: 680px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #173f36;
  color: white;
  border-radius: 16px;
  box-shadow: 0 5px 24px #173f3650;
}
.pack-bar-summary { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; }
#pack-dock-count, #pack-dock-note { font-size: 12px; color: #d9efe5; }
#pack-dock-price { font-size: 15px; }
#pack-dock-note { flex-basis: 100%; }
#pack-open { width: auto; padding: 7px 14px; border: 0; border-radius: 999px; background: #fff; color: #173f36; font-weight: bold; }
#pack-dialog { width: min(680px, calc(100% - 20px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: 24px; }
#pack-dialog::backdrop { background: #142822a0; }

@media (max-width: 560px) {
  #pack-summary { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #grid article { transition: none; }
}