* { box-sizing: border-box; }
body { margin: 0; font-family: "Yu Gothic", "Meiryo", Arial, sans-serif; color: #1f2a33; background: #f4f7f8; }
header { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: #fff; border-bottom: 1px solid #d8e1e5; }
header .brand { font-size: 24px; font-weight: 700; color: #1f2a33; text-decoration: none; }
nav { display: flex; gap: 18px; align-items: center; }
nav a { color: #00745f; text-decoration: none; font-weight: 700; }
main { padding: 24px 18px; }
.head { display: flex; gap: 16px; align-items: baseline; }
.head p { color: #557; font-weight: 700; }
.head h1 { margin: 0; font-size: 36px; }
.toolbar { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.toolbar a { border: 1px solid #b8cad1; border-radius: 999px; padding: 10px 18px; background: #fff; color: #111; text-decoration: none; font-weight: 700; }
.filters { display: flex; gap: 12px; margin: 14px 0 22px; }
.filters input { height: 42px; border: 1px solid #c9d6dc; border-radius: 6px; padding: 0 12px; font-size: 15px; }
.filters button, .login-box button { height: 42px; border: 1px solid #00745f; border-radius: 6px; background: #00745f; color: #fff; padding: 0 20px; font-weight: 700; }
.panel { background: #fff; border: 1px solid #d5e0e4; border-radius: 8px; padding: 10px; }
.count { margin-bottom: 8px; color: #60727c; }
.table-wrap { overflow-x: hidden; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
th { text-align: left; background: #dce8ee; border-bottom: 2px solid #9fb7c2; padding: 5px 4px; white-space: nowrap; font-size: 12px; }
td { border-bottom: 1px solid #d6e1e6; padding: 5px 4px; vertical-align: middle; overflow: hidden; font-size: 11px; }
.order-head-row th { background: #dce8ee; border-top: 2px solid #9fb7c2; border-bottom: 2px solid #9fb7c2; }
.c-order { width: 8%; }
.c-date { width: 6%; }
.c-maker { width: 4%; }
.c-part { width: 9%; }
.c-name { width: 13%; }
.c-qty { width: 3.5%; }
.c-price { width: 4.5%; }
.c-cost { width: 5%; }
.c-comment { width: 9%; }
.c-master-order { width: 5%; }
.c-status { width: 6%; }
.c-remain { width: 3.5%; }
.c-ship1, .c-ship2, .c-ship3 { width: 6%; }
.part { color: #00745f; font-weight: 700; white-space: nowrap; }
.name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comment { white-space: normal; line-height: 1.25; word-break: break-word; }
.pill, .status { display: inline-block; border: 1px solid #b8cad1; border-radius: 999px; padding: 4px 8px; background: #eef6f8; font-weight: 700; white-space: nowrap; font-size: 10px; }
.order-head-row td { background: #edf6f0; border-top: 2px solid #bcd4c2; border-bottom: 1px solid #d6e4da; padding: 8px 12px; overflow: visible; }
.order-head-meta { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.order-head-order { display: inline-flex; align-items: center; color: #17232b; font-size: 15px; font-weight: 700; flex: 0 0 auto; }
.order-head-spacer { display: none; }
.order-head-status { display: inline-flex; align-items: center; padding: 3px 8px; font-size: 9px; background: #e0f2e4; border-color: #b9d5be; color: #2d5a31; }
.order-head-shipdate { display: inline-flex; align-items: center; color: #52646e; font-size: 10px; font-style: normal; flex: 0 0 auto; }
.order-status-chip,
.order-flag-chip { display: inline-block; border-radius: 999px; padding: 2px 7px; font-size: 10px; line-height: 1.2; white-space: nowrap; flex: 0 0 auto; }
.order-status-chip { background: #e8f2f6; border: 1px solid #b6c8d1; color: #24333d; font-weight: 700; }
.order-flag-chip { display: inline-flex; align-items: center; padding: 3px 8px; font-size: 9px; background: #fff0df; border: 1px solid #e2bc8f; color: #8d5a1d; font-style: normal; font-weight: 700; margin-left: 0; }
.hold-row { background: #fff8df; }
.reason-row .comment { background: #ffe69a; border-left: 4px solid #d78900; font-weight: 700; }
.muted-row { background: #cfd6da; color: #35424a; }
.muted-row .pill, .muted-row .status { background: #b9c2c7; }
.muted-row .comment { background: #aeb8be; border-left-color: #8b969d; color: #26333a; }
.shipping { white-space: normal; overflow: hidden; padding-right: 0; }
.ship-cell { display: grid; gap: 1px; line-height: 1.05; }
.ship-cell small { color: #667; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.ship-cell b { font-size: 10px; }
td small, td b { display: block; }
.empty { text-align: center; color: #667; padding: 32px; }
.login { min-height: 100vh; display: grid; place-items: center; background: #eef4f5; }
.login-box { width: min(420px, 92vw); background: #fff; border: 1px solid #d5e0e4; border-radius: 8px; padding: 28px; display: grid; gap: 14px; }
.login-box h1 { margin: 0 0 8px; }
.login-box label { display: grid; gap: 6px; font-weight: 700; }
.login-box input { height: 42px; border: 1px solid #c9d6dc; border-radius: 6px; padding: 0 12px; }
.error { color: #b00020; font-weight: 700; }
.notice { color: #00745f; font-weight: 700; }
.upload-panel { display: grid; gap: 12px; max-width: 720px; }
.upload-panel p { margin: 0; }
.upload-form { display: grid; gap: 14px; align-items: start; }
.upload-form label { display: grid; gap: 6px; font-weight: 700; }
.upload-form input[type="file"] { border: 1px solid #c9d6dc; border-radius: 6px; padding: 10px; background: #fff; }
.upload-form button { width: fit-content; height: 42px; border: 1px solid #00745f; border-radius: 6px; background: #00745f; color: #fff; padding: 0 20px; font-weight: 700; }
.purchase-wrap { overflow-x: auto; }
.purchase-table { min-width: 980px; }
.purchase-table th,
.purchase-table td { font-size: 11px; white-space: nowrap; }
.purchase-table td:nth-child(n+3) { text-align: right; }
.purchase-table td:nth-child(2) { text-align: left; }
.settings-panel { display: grid; gap: 14px; max-width: 820px; }
.settings-panel h2 { margin: 8px 0 0; font-size: 18px; }
.settings-form { display: grid; gap: 12px; align-items: start; padding: 12px; border: 1px solid #d5e0e4; border-radius: 8px; background: #fbfdfe; }
.settings-form label { display: grid; gap: 6px; font-weight: 700; }
.settings-form input { height: 42px; border: 1px solid #c9d6dc; border-radius: 6px; padding: 0 12px; font-size: 14px; }
.settings-form button { width: fit-content; height: 42px; border: 1px solid #00745f; border-radius: 6px; background: #00745f; color: #fff; padding: 0 20px; font-weight: 700; }
.note { color: #60727c; font-size: 12px; }
@media (max-width: 760px) {
  header { padding: 0 16px; }
  main { padding: 20px 14px; }
  .filters { display: grid; }
  .order-head-meta { gap: 6px; flex-wrap: wrap; white-space: normal; }
  .order-head-spacer { display: none; }
}