:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #008080; }
[hidden] { display: none !important; }
.win95-ui {
  --surface: #c0c0c0; --light: #fff; --shadow: #808080; --dark: #000; --navy: #000080;
  min-height: 100vh; padding: 18px; color: #000;
  font-family: "MS Sans Serif", Tahoma, "Microsoft Sans Serif", "Microsoft YaHei UI", sans-serif;
  font-size: 13px; letter-spacing: 0;
}
.win95-ui button, .win95-ui input { border-radius: 0; color: #000; font: inherit; letter-spacing: 0; }
.window { background: var(--surface); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); box-shadow: 1px 1px 0 var(--shadow); }
.main-window { width: min(1120px, 100%); margin: 0 auto; }
.title-bar { min-height: 26px; margin: 2px; padding: 3px 3px 3px 5px; display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; }
.title-bar-text { display: flex; align-items: center; min-width: 0; gap: 6px; font-weight: 700; }
.title-bar-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-bar-text img, .empty-state img, .loading-state img, .dialog-message img { image-rendering: pixelated; flex: 0 0 auto; }
.window-controls { display: flex; gap: 2px; }
.window-controls span, .close-button { width: 20px; height: 19px; padding: 0; display: grid; place-items: center; background: var(--surface); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); color: #000; font-weight: 700; line-height: 1; }
.menu-bar { display: flex; gap: 22px; padding: 5px 9px 7px; white-space: nowrap; }
.window-body { padding: 6px 10px 10px; }
fieldset { margin: 0 0 10px; padding: 14px 12px 12px; border: 2px groove var(--light); min-width: 0; }
legend { padding: 0 5px; }
.query-form { display: grid; grid-template-columns: max-content minmax(180px, 420px) 110px; align-items: center; gap: 10px; }
.credential-form { width: min(100%, 620px); display: grid; grid-template-columns: max-content minmax(180px, 420px); align-items: center; gap: 9px 12px; }
.credential-form .form-actions { grid-column: 2; display: flex; justify-content: flex-end; }
.credential-form .form-actions button { min-width: 110px; }
.win95-ui input { width: 100%; min-height: 27px; padding: 4px 6px; background: #fff; border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); box-shadow: inset 1px 1px 0 #000; outline: none; }
.win95-ui input:focus { outline: 1px dotted #000; outline-offset: -4px; }
.win95-ui button { min-height: 27px; padding: 3px 12px; background: var(--surface); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); box-shadow: 1px 1px 0 var(--shadow); }
.win95-ui button:active { transform: translate(1px, 1px); border-color: var(--dark) var(--light) var(--light) var(--dark); box-shadow: none; }
.win95-ui button:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.win95-ui button:disabled { color: var(--shadow); text-shadow: 1px 1px #fff; }
.win95-ui .window-controls button { width: 20px; min-height: 19px; height: 19px; padding: 0; display: grid; place-items: center; background: var(--surface); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); box-shadow: none; color: #000; font-weight: 700; line-height: 1; cursor: pointer; }
.win95-ui .window-controls button:active { transform: none; border-color: var(--dark) var(--light) var(--light) var(--dark); }
.default-button { outline: 1px solid #000; outline-offset: 1px; }
.inset-panel { background: #fff; border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); box-shadow: inset 1px 1px 0 #000; }
.empty-state, .loading-state { min-height: 108px; padding: 22px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.empty-state p, .loading-state p { margin: 5px 0 0; line-height: 1.5; }
.hourglass { font-size: 26px; }
.message { margin: 8px 0 0; }
.error-message { color: #a00000; font-weight: 700; }
.result-banner { padding: 10px 12px; border-left-width: 10px; }
.result-banner > span { display: block; margin-bottom: 4px; color: #444; }
.result-banner > strong { display: block; font-size: 20px; line-height: 1.3; }
.result-banner > p { margin: 5px 0 0; line-height: 1.5; }
.result-banner[data-tone="success"] { border-left-color: #008000; }
.result-banner[data-tone="danger"] { border-left-color: #800000; }
.result-banner[data-tone="warning"] { border-left-color: #808000; }
.result-banner[data-tone="info"] { border-left-color: #000080; }
.result-banner[data-tone="neutral"] { border-left-color: #808080; }
.customer-grid, .decision-grid { display: grid; margin-top: 10px; background: #fff; border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); }
.customer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.decision-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.customer-grid > div, .decision-grid > div { min-width: 0; min-height: 66px; padding: 8px; border-right: 1px solid var(--shadow); border-bottom: 1px solid var(--shadow); }
.customer-grid > div:nth-child(3n), .decision-grid > div:last-child { border-right: 0; }
.customer-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
.decision-grid > div { border-bottom: 0; }
.customer-grid span, .decision-grid span { display: block; margin-bottom: 6px; color: #444; }
.customer-grid strong, .decision-grid strong { display: block; overflow-wrap: anywhere; }
.decision-grid strong { font-size: 15px; }
#responsible-role { color: #000080; }
#attention { color: #800000; }
.approval-detail { margin-top: 10px; padding: 0; }
.approval-heading { display: grid; grid-template-columns: max-content 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--surface); border-bottom: 1px solid var(--shadow); }
.approval-heading > span:first-child { color: #444; }
.approval-heading strong { color: #000080; font-size: 15px; }
.approval-handler { display: flex; align-items: center; gap: 9px; padding: 10px; }
.approval-handler > div { display: flex; flex-direction: column; gap: 3px; }
.approval-handler > div > span { color: #555; }
.approval-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; background: #000080; color: #fff; border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); font-weight: 700; }
.approval-result { display: grid; grid-template-columns: 1fr 2fr; margin: 0; border-top: 1px solid var(--shadow); }
.approval-result > div { min-width: 0; padding: 8px 10px; border-right: 1px solid var(--shadow); }
.approval-result > div:last-child { border-right: 0; }
.approval-result dt { margin: 0 0 4px; color: #444; }
.approval-result dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
#approval-status, #approval-opinion { color: #800000; }
.next-action { margin-top: 10px; padding: 9px; display: grid; grid-template-columns: max-content 1fr; gap: 5px; line-height: 1.5; }
.next-action p { margin: 0; font-weight: 700; }
.profile-group { margin-top: 10px; }
.profile-hint { margin: 0 0 9px; color: #444; line-height: 1.45; }
.profile-overview { overflow-x: auto; }
.profile-table { min-width: 0; width: 100%; table-layout: fixed; }
.profile-table th { width: 35%; font-weight: 400; white-space: normal; }
.profile-table td { overflow-wrap: anywhere; white-space: pre-wrap; }
.profile-sections { display: grid; gap: 8px; margin-top: 9px; }
.profile-section { min-width: 0; }
.profile-section > summary { min-height: 31px; padding: 7px 9px; cursor: pointer; background: var(--surface); font-weight: 700; }
.profile-section > summary:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.profile-section[open] > summary { border-bottom: 1px solid var(--shadow); }
.profile-section-content { overflow-x: auto; }
.profile-section-content .profile-table { min-width: 620px; }
.table-scroll { overflow-x: auto; max-width: 100%; }
table { width: 100%; min-width: 860px; border-collapse: collapse; background: #fff; }
th, td { padding: 7px 8px; border-right: 1px solid var(--shadow); border-bottom: 1px solid var(--shadow); text-align: left; vertical-align: top; }
th { background: var(--surface); border-width: 2px; border-style: solid; border-color: var(--light) var(--shadow) var(--shadow) var(--light); white-space: nowrap; }
tbody tr[data-state="complete"] td:nth-child(3) { color: #006000; font-weight: 700; }
tbody tr[data-state="current"] td:nth-child(3) { color: #000080; font-weight: 700; }
tbody tr[data-state="error"] td:nth-child(3) { color: #a00000; font-weight: 700; }
tbody tr[data-state="blocked"] td:nth-child(2),
tbody tr[data-state="blocked"] td:nth-child(3) { color: #800000; font-weight: 700; }
tbody tr[data-state="future"] { color: #666; }
tbody tr:nth-child(even) { background: #f2f2f2; }
.status-bar { display: grid; grid-template-columns: 1fr 1fr auto; gap: 3px; padding: 3px; }
.status-panel { min-width: 0; padding: 3px 6px; border: 1px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.window { width: min(420px, calc(100vw - 24px)); padding: 0; color: #000; }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
.dialog-body { padding: 18px; }
.dialog-message { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; }
.dialog-message label { display: block; margin-bottom: 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.dialog-actions button { min-width: 82px; }
.log-summary { margin: 0 0 10px; color: #444; line-height: 1.5; }
.log-status-ok { color: #006000; font-weight: 700; }
.log-status-failed { color: #800000; font-weight: 700; }
@media (max-width: 700px) {
  .win95-ui { padding: 7px; font-size: 12px; }
  .window-body { padding-inline: 6px; }
  .query-form { grid-template-columns: 1fr; align-items: stretch; }
  .query-form button { width: 100%; min-height: 32px; }
  .credential-form { grid-template-columns: 1fr; gap: 4px; }
  .credential-form label:not(:first-child) { margin-top: 7px; }
  .credential-form .form-actions { grid-column: auto; margin-top: 8px; }
  .credential-form .form-actions button { width: 100%; min-height: 32px; }
  .customer-grid, .decision-grid { grid-template-columns: 1fr 1fr; }
  .customer-grid > div, .decision-grid > div { min-height: 62px; border-right: 1px solid var(--shadow); border-bottom: 1px solid var(--shadow); }
  .customer-grid > div:nth-child(2n), .decision-grid > div:nth-child(2n) { border-right: 0; }
  .customer-grid > div:nth-last-child(-n+2), .decision-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .next-action { grid-template-columns: 1fr; }
  .profile-table th { width: 42%; }
  .approval-heading { grid-template-columns: 1fr; gap: 3px; }
  .approval-result { grid-template-columns: 1fr; }
  .approval-result > div { border-right: 0; border-bottom: 1px solid var(--shadow); }
  .approval-result > div:last-child { border-bottom: 0; }
  .status-bar { grid-template-columns: 1fr; }
  .empty-state, .loading-state { justify-content: flex-start; padding: 16px; }
}
@media (max-width: 380px) {
  .customer-grid, .decision-grid { grid-template-columns: 1fr; }
  .customer-grid > div, .decision-grid > div { border-right: 0; border-bottom: 1px solid var(--shadow) !important; }
  .customer-grid > div:last-child, .decision-grid > div:last-child { border-bottom: 0 !important; }
  .menu-bar { gap: 13px; }
  .dialog-message { grid-template-columns: 1fr; }
}