[data-yarn-root] { display: grid; gap: 22px; }
.yarn-warning { background: #fff7d6; border: 1px solid #ead68a; border-radius: 14px; padding: 14px 16px; color: #5d4a00; }
.yarn-entry-grid, .yarn-history-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: start; }
.yarn-scan-card { min-height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.yarn-camera-button { display: inline-flex; justify-content: center; align-items: center; cursor: pointer; }
.yarn-status { min-height: 24px; color: #52647b; font-weight: 600; }
.yarn-section-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.yarn-section-head h3 { margin-bottom: 4px; }
.yarn-section-head p { margin: 0; color: #65748a; }
.yarn-review-top { display: grid; grid-template-columns: minmax(220px, 0.7fr) minmax(420px, 1.6fr); gap: 22px; align-items: start; }
.yarn-review-top img { width: 100%; max-height: 520px; object-fit: contain; border: 1px solid #dbe3ed; border-radius: 14px; background: #f7f9fc; }
.yarn-items-wrap { margin-top: 20px; }
.yarn-items-wrap table { min-width: 1150px; }
.yarn-items-wrap input, .yarn-items-wrap select { min-width: 110px; width: 100%; padding: 10px; border: 1px solid #ccd7e5; border-radius: 8px; background: #fff; }
.yarn-items-wrap td:nth-child(2) input { min-width: 230px; }
.remove-line { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fde8e8; color: #b42318; font-size: 22px; cursor: pointer; }
.yarn-actions { display: flex; justify-content: space-between; gap: 12px; }
.link-btn { border: 0; padding: 0; background: transparent; color: #155a8a; text-decoration: underline; cursor: pointer; font: inherit; }

@media (max-width: 900px) {
  .yarn-entry-grid, .yarn-history-grid, .yarn-review-top { grid-template-columns: 1fr; }
  .yarn-scan-card { min-height: auto; }
  .yarn-review-top img { max-height: 420px; }
  .yarn-section-head { flex-direction: column; }
  .yarn-actions { flex-direction: column; }
  .yarn-actions .btn { width: 100%; }
}