.b10-page { max-width: 1280px; margin: 0 auto; padding: 20px; color: #172b40; }
.b10-page h1 { margin: 0 0 16px; font-size: 26px; }
.b10-page h3 { margin: 0 0 14px; font-size: 18px; }
.b10-page .b10-banner { border-left: 4px solid #ba791a; background: #fff5dd; padding: 14px 16px; line-height: 1.6; border-radius: 5px; }
.b10-page .b10-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.b10-page .b10-tabs a { padding: 10px 14px; border: 1px solid #ccd7e1; border-radius: 7px; text-decoration: none; color: #234866; background: white; }
.b10-page .b10-tabs a[aria-current="page"] { color: white; background: #285f80; border-color: #285f80; }
.b10-page .b10-layout { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(300px, 2fr); gap: 20px; margin-bottom: 16px; align-items: start; }
.b10-page .b10-list { display: grid; gap: 10px; min-width: 0; }
.b10-page .b10-record { padding: 16px; border: 1px solid #dae1e7; border-radius: 8px; background: #fff; overflow-wrap: anywhere; }
.b10-page .b10-record p { margin: 8px 0; }
.b10-page .b10-detail { min-width: 0; padding: 20px; border: 1px solid #dae1e7; border-radius: 8px; background: #fff; overflow-wrap: anywhere; }
.b10-page .b10-grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.b10-page .b10-pair dt { color: #586b7b; font-size: 13px; margin-bottom: 4px; }
.b10-page .b10-pair dd { margin: 0; overflow-wrap: anywhere; }
.b10-page .b10-line { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px; background: #f2f6f9; border-radius: 6px; }
.b10-page .b10-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; align-items: end; }
.b10-page .b10-button { min-height: 40px; padding: 8px 14px; border: 1px solid #a9bdcb; border-radius: 6px; cursor: pointer; background: #f7fafc; color: #204863; }
.b10-page .b10-button:disabled { opacity: .5; cursor: default; }
.b10-page .b10-note { color: #697782; font-size: 13px; line-height: 1.7; }
.b10-page .b10-field { display: grid; gap: 6px; min-width: 0; }
.b10-page .b10-field input { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; border: 1px solid #b9c9d4; border-radius: 5px; }
.b10-page .b10-field textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #b9c9d4; border-radius: 5px; }
.b10-page .b10-form { display: grid; gap: 12px; max-width: 600px; padding: 18px; margin-top: 20px; background: #f2f6f9; border-radius: 8px; }
.b10-page .b10-health { border: 1px solid #d4e1e8; border-radius: 10px; background: #f8fbfd; padding: 16px 18px; margin: 16px 0; }
.b10-page .b10-health h2 { margin: 0 0 12px; font-size: 17px; }
.b10-page .b10-health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.b10-page .b10-health-card, .b10-page .b10-stat { margin: 0; padding: 10px 12px; border: 1px solid #dce5eb; background: #fff; border-radius: 7px; line-height: 1.6; }
.b10-page .b10-outbox-stats { display: flex; gap: 7px; flex-wrap: wrap; }
.b10-page .b10-stat { font-size: 12px; }
.b10-page .b10-filters { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 12px; padding: 14px; border: 1px solid #e0e7ec; border-radius: 8px; background: #f8fafb; margin: 12px 0; }
.b10-page .b10-filters select, .b10-page .b10-filters input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #b9c9d4; border-radius: 5px; background: white; font: inherit; }
.b10-page .b10-compare { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.b10-page .b10-compare th, .b10-page .b10-compare td { border: 1px solid #dce4e9; padding: 9px; text-align: left; }
.b10-page .b10-compare th { background: #f2f6f9; }
.b10-page .b10-change-up { background: #e8f7ee; }
.b10-page .b10-change-down { background: #fff0ed; }
.b10-page .b10-date-change { padding: 9px 12px; background: #fff3d7; border-left: 3px solid #bd7716; }
.b10-page .b10-confirmation-progress { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.b10-page .b10-progress-step { padding: 7px 10px; border-radius: 20px; font-size: 12px; }
.b10-page .b10-progress-step.is-done { color: #17614a; background: #e0f3ea; }
.b10-page .b10-progress-step.is-waiting { color: #8b4c14; background: #fff0d9; }
.b10-page .b10-list-summary { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 0 14px; }
.b10-page .b10-list-count { padding: 5px 9px; border-radius: 16px; color: #385767; background: #edf3f6; font-size: 12px; }
@media (max-width: 760px) { .b10-page .b10-health-grid, .b10-page .b10-filters { grid-template-columns: minmax(0, 1fr); } .b10-page .b10-compare { display: block; overflow-x: auto; white-space: nowrap; } }
@media (max-width: 640px) {
  .b10-page { padding: 12px; }
  .b10-page .b10-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .b10-page .b10-grid { grid-template-columns: minmax(0, 1fr); }
  .b10-page .b10-tabs a { padding: 9px 10px; font-size: 13px; }
  .b10-page .b10-detail { padding: 14px; }
  .b10-page .b10-actions { align-items: stretch; flex-direction: column; }
}

/* J5018 visual refinements */
.b10-page { color:#172033; }
.b10-page h1 { color:#0f172a; letter-spacing:-.035em; }
.b10-page .b10-banner { border:1px solid #fed7aa; border-left:4px solid #f59e0b; border-radius:10px; box-shadow:0 3px 10px #0f172a08; }
.b10-page .b10-tabs a { min-height:40px; display:inline-flex; align-items:center; border-color:#dbe3ec; border-radius:9px; color:#334155; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.b10-page .b10-tabs a[aria-current="page"] { color:#fff; background:#2563eb; border-color:#2563eb; box-shadow:0 3px 9px #2563eb26; }
.b10-page .b10-record,.b10-page .b10-detail,.b10-page .b10-health { border-color:#e2e8f0; border-radius:12px; box-shadow:0 4px 14px #0f172a08; }
.b10-page .b10-record { position:relative; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.b10-page .b10-record:hover { border-color:#bfdbfe; box-shadow:0 8px 22px #1e293b12; transform:translateY(-1px); }
.b10-page .b10-detail { padding:22px; }
.b10-page .b10-health-card,.b10-page .b10-stat { border-color:#e2e8f0; border-radius:9px; font-variant-numeric:tabular-nums; }
.b10-page .b10-health-card { border-top:3px solid #60a5fa; }
.b10-page .b10-health-card:first-child { border-top-color:#8b5cf6; }
.b10-page .b10-health-card:last-child { border-top-color:#22c55e; }
.b10-page .b10-stat { background:#f8fafc; color:#334155; }
.b10-page .b10-filters,.b10-page .b10-form { border-color:#e2e8f0; border-radius:11px; background:#f8fafc; }
.b10-page .b10-field input,.b10-page .b10-field textarea,.b10-page .b10-filters select,.b10-page .b10-filters input { border-color:#cbd5e1; border-radius:8px; min-height:40px; }
.b10-page .b10-field input:focus,.b10-page .b10-field textarea:focus,.b10-page .b10-filters select:focus,.b10-page .b10-filters input:focus { outline:0; border-color:#3b82f6; box-shadow:0 0 0 3px #3b82f61f; }
.b10-page .b10-button { border-color:#cbd5e1; border-radius:8px; background:#fff; color:#334155; font-weight:600; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; }
.b10-page .b10-button:hover:not(:disabled) { border-color:#93c5fd; background:#eff6ff; box-shadow:0 3px 9px #2563eb1a; }
.b10-page .b10-button:disabled { opacity:.48; }
.b10-page .b10-compare { display:block; max-width:100%; overflow-x:auto; border:1px solid #dbe3ec; border-radius:9px; background:#fff; font-variant-numeric:tabular-nums; }
.b10-page .b10-compare th,.b10-page .b10-compare td { border-color:#e2e8f0; padding:10px 12px; }
.b10-page .b10-compare th { position:sticky; top:0; z-index:1; background:#f1f5f9; color:#334155; font-weight:700; }
.b10-page .b10-compare tbody tr:nth-child(even) { background:#f8fafc; }
.b10-page .b10-compare tbody tr:hover { background:#eff6ff; }
.b10-page .b10-change-up { color:#166534; background:#ecfdf5; }
.b10-page .b10-change-down { color:#b91c1c; background:#fef2f2; }
.b10-page .b10-progress-step,.b10-page .b10-list-count { border:1px solid #e2e8f0; border-radius:999px; font-weight:650; }
@media (max-width:640px) {
  .b10-page { padding:12px; }
  .b10-page .b10-actions { align-items:stretch; }
  .b10-page .b10-actions .b10-button { width:100%; min-height:44px; }
  .b10-page .b10-compare { overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
}
.b10-page .b10-button,.b10-page .b10-field input,.b10-page .b10-field textarea { font:inherit; }
@media (prefers-reduced-motion:reduce) { .b10-page .b10-record,.b10-page .b10-button,.b10-page .b10-tabs a { transition:none; transform:none; } }