:root {
  color-scheme: light;
  font-family: "Segoe UI", "Yu Gothic UI", system-ui, sans-serif;
  color: #14213d;
  background: #f3f6fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1040px; }
button, input { font: inherit; }
button { cursor: pointer; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 36px;
  color: white;
  background: linear-gradient(120deg, #12377c, #2457bd);
}
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: 30px; }
h2 { margin-bottom: 4px; font-size: 18px; }
.subtitle { margin-bottom: 0; color: #dbe7ff; }
.eyebrow { margin-bottom: 4px; color: #5d6e8c; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.page-header .eyebrow { color: #bcd0ff; }
.status-dot { padding: 8px 12px; border: 1px solid #7095e6; border-radius: 999px; color: #dbe7ff; font-size: 13px; }
.status-dot.connected { border-color: #74d7a5; color: #cbf7df; }

main { padding: 24px 36px 50px; }
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.summary article, .panel { border: 1px solid #dfe5ef; border-radius: 12px; background: white; box-shadow: 0 3px 12px rgba(31, 57, 104, .06); }
.summary article { padding: 17px 20px; }
.summary span { display: block; margin-bottom: 6px; color: #68758d; font-size: 12px; }
.summary strong { font-size: 25px; }
.panel { padding: 18px; }

.asin-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.asin-panel > div:first-child { flex: 1; }
.asin-panel p { margin-bottom: 0; color: #68758d; font-size: 13px; }
.asin-actions { display: flex; gap: 8px; }
.secondary-button { color: #29405f; background: #e8edf5; }
.asin-panel .message { width: 100%; }
#asin-list { width: 100%; height: 180px; resize: vertical; border: 1px solid #bdc8da; border-radius: 8px; padding: 10px 12px; font: 12px/1.45 ui-monospace, monospace; }

.upload-panel { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }
.upload-panel > div:first-child { flex: 1; }
.upload-panel p { margin-bottom: 0; color: #68758d; font-size: 13px; }
.upload-controls { display: flex; align-items: center; gap: 10px; }
input[type="file"] { max-width: 310px; }
button { border: 0; border-radius: 8px; padding: 10px 14px; color: white; background: #2457bd; font-weight: 700; }
button:disabled { opacity: .55; cursor: wait; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.logout-link { color: white; font-size: 12px; }
.login-page { min-width: 0; }
.login-main { display: grid; min-height: 100vh; place-items: center; padding: 20px; }
.login-panel { display: grid; width: min(420px, 100%); gap: 12px; }
.login-panel h1 { font-size: 24px; }
.login-panel label { font-weight: 800; }
.login-panel input { width: 100%; min-height: 46px; border: 1px solid #bdc8da; border-radius: 8px; padding: 10px 12px; font-size: 16px; }
.message { min-width: 280px; margin: 0; font-size: 13px; }
.message.success { color: #137447; }
.message.error { color: #b42318; }

.search-panel { margin-bottom: 14px; }
.search-panel label { display: block; margin-bottom: 8px; font-weight: 800; }
.search-panel input { width: 100%; border: 1px solid #bdc8da; border-radius: 8px; padding: 12px 14px; outline: none; }
.search-panel input:focus { border-color: #2457bd; box-shadow: 0 0 0 3px rgba(36, 87, 189, .12); }

.content-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 14px; align-items: start; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > span { color: #68758d; font-size: 12px; white-space: nowrap; }
.product-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.product-heading-actions > span { color: #68758d; font-size: 12px; white-space: nowrap; }
.store-panel { max-height: calc(100vh - 330px); overflow: auto; padding: 12px; }
.store-list { display: grid; gap: 6px; }
.store-item { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 11px; color: #1f2d49; background: #f5f7fb; text-align: left; }
.store-item:hover, .store-item.selected { color: #153e91; background: #e7efff; }
.store-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-item strong { color: #2457bd; font-size: 12px; white-space: nowrap; }
.empty-state { padding: 28px 12px; color: #7a879d; text-align: center; }

.product-panel { min-width: 0; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { position: sticky; top: 0; padding: 9px 8px; color: #5f6d85; background: #eef2f8; text-align: left; white-space: nowrap; }
td { padding: 10px 8px; border-bottom: 1px solid #e7ebf2; vertical-align: top; white-space: nowrap; }
td:first-child { min-width: 260px; white-space: normal; }
td:first-child strong, td:first-child small { display: block; }
td:first-child small { margin-top: 5px; color: #738096; }
.product-note { padding: 7px 9px; border-radius: 6px; color: #6e4e10 !important; background: #fff3c7; font-weight: 700; }
.reason { max-width: 170px; color: #137447; font-weight: 700; white-space: normal; }
.links { display: flex; gap: 7px; }
.links a { color: #2457bd; }
.image-button { padding: 6px 9px; font-size: 11px; white-space: nowrap; }
.review-button { padding: 6px 9px; color: #8a2d20; background: #f7ddd8; font-size: 11px; white-space: nowrap; }
.review-button.is-rejected { color: white; background: #a33a2b; }
.review-actions { display: flex; gap: 6px; }
.memo-button { padding: 6px 9px; color: #69500c; background: #f7e8a9; font-size: 11px; white-space: nowrap; }
.memo-button.has-memo { color: white; background: #8a6a12; }
.rejected-product > td { background: #fff1ef; color: #7d3025; }
.rejected-product > td:first-child { box-shadow: inset 5px 0 #c65343; }
.media-row td { padding: 14px; background: #f6f8fc; }
.media-grid { display: grid; grid-template-columns: minmax(180px, 280px) minmax(420px, 1fr); gap: 18px; align-items: start; }
.media-grid figure { margin: 0; }
.media-grid figcaption { margin-bottom: 8px; color: #5f6d85; font-weight: 800; }
.media-grid img { display: block; max-width: 100%; max-height: 360px; border: 1px solid #d9e0ec; border-radius: 8px; background: white; object-fit: contain; }
.media-grid figure:first-child img { width: 220px; height: 280px; }
.media-grid figure:last-child img { width: 100%; min-height: 240px; }

@media (max-width: 1200px) {
  .upload-panel { align-items: flex-start; flex-wrap: wrap; }
  .message { width: 100%; }
}

@media (max-width: 700px) {
  body { min-width: 0; }
  .page-header { align-items: flex-start; padding: 18px 16px; }
  .page-header h1 { font-size: 24px; }
  .page-header .subtitle { font-size: 12px; }
  .status-dot { flex: 0 0 auto; padding: 6px 8px; font-size: 11px; }
  .header-actions { flex-direction: column; align-items: flex-end; }

  main { display: flex; flex-direction: column; padding: 14px 12px 36px; }
  .summary { order: 1; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
  .summary article { padding: 12px; }
  .summary strong { font-size: 20px; }
  .search-panel { order: 2; position: sticky; top: 0; z-index: 10; margin-bottom: 10px; padding: 12px; }
  .search-panel input { min-height: 46px; font-size: 16px; }
  .content-grid { order: 3; grid-template-columns: 1fr; gap: 10px; }
  .asin-panel { order: 4; margin-top: 10px; }
  .upload-panel { order: 5; }

  .panel { padding: 13px; border-radius: 10px; }
  .asin-panel, .upload-panel { display: block; }
  .asin-actions, .upload-controls { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
  .asin-actions button, .upload-controls button { width: 100%; min-height: 44px; }
  input[type="file"] { width: 100%; max-width: none; }
  .message { min-width: 0; }

  .store-panel { max-height: 310px; }
  .store-item { min-height: 44px; align-items: center; }
  .store-item span { white-space: normal; }

  .section-heading { align-items: flex-start; }
  .product-heading-actions { flex-direction: column; align-items: flex-end; }
  .product-heading-actions .image-button { min-height: 40px; padding: 8px 11px; }
  .table-wrap { overflow: visible; }
  table, tbody { display: block; width: 100%; }
  thead { display: none; }
  #product-rows { display: grid; gap: 10px; }
  #product-rows > tr:not(.media-row) {
    display: grid;
    overflow: hidden;
    border: 1px solid #dfe5ef;
    border-radius: 10px;
    background: white;
    box-shadow: 0 2px 8px rgba(31, 57, 104, .06);
  }
  #product-rows > tr:not(.media-row) > td {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    white-space: normal;
  }
  #product-rows > tr:not(.media-row) > td::before {
    content: attr(data-label);
    color: #68758d;
    font-size: 11px;
    font-weight: 800;
  }
  #product-rows > tr:not(.media-row) > td:first-child { grid-template-columns: 1fr; padding: 12px 10px; background: #f5f7fb; }
  #product-rows > tr:not(.media-row) > td:first-child::before { display: none; }
  #product-rows .links { display: grid; grid-template-columns: 88px minmax(0, 1fr); }
  #product-rows .links a { margin-right: 12px; }
  #product-rows .image-button { width: 100%; min-height: 40px; }
  #product-rows .review-button { width: 100%; min-height: 40px; }
  #product-rows .review-actions { display: grid; grid-template-columns: 88px minmax(0, 1fr); }
  #product-rows .review-actions::before { grid-row: 1 / span 2; }
  #product-rows .memo-button { width: 100%; min-height: 40px; }
  #product-rows > tr.rejected-product { border-color: #d98a7f; background: #fff1ef; }
  #product-rows > tr.rejected-product > td:first-child { background: #f9dcd7; }

  .media-row { display: block; margin-top: -10px; }
  .media-row td { display: block; width: 100%; padding: 10px; border: 1px solid #dfe5ef; border-top: 0; border-radius: 0 0 10px 10px; }
  .media-grid { grid-template-columns: 1fr; gap: 14px; }
  .media-grid figure:first-child img { width: 100%; height: auto; max-height: 340px; }
  .media-grid figure:last-child img { width: 100%; min-height: 0; height: auto; }
}