:root{--ink:#20242b;--muted:#747b86;--line:#e5e7eb;--paper:#fff;--wash:#f5f6f8;--coffee:#8b4d32;--coffee-dark:#693722;--green:#2e8b67;--danger:#c44747}*{box-sizing:border-box}body{margin:0;background:var(--wash);color:var(--ink);font:14px/1.5 Inter,"Microsoft YaHei",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--coffee);font-weight:700}.topbar h1{font-size:20px;margin:2px 0 0}.status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.status span:first-child{width:8px;height:8px;border-radius:50%;background:#b7bcc3}.status.ok span:first-child{background:var(--green)}.layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 78px)}.sidebar{background:#fbfbfc;border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:20px}.content{max-width:1180px;width:100%;padding:32px 38px;margin:auto}.panel{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:22px;box-shadow:0 2px 8px #20242b08}.compact{padding:16px}.panel h3{font-size:15px;margin:0 0 18px}.panel-title,.page-heading,.inline,.actions,.token-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.page-heading{margin-bottom:24px}.page-heading h2{font-size:26px;line-height:1.2;margin:4px 0 6px}.page-heading p{margin:0;color:var(--muted)}label{display:block;color:#59616d;font-size:12px;margin:14px 0 6px}input,select,textarea{width:100%;border:1px solid #d7dbe0;border-radius:5px;background:#fff;padding:10px 11px;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--coffee);box-shadow:0 0 0 3px #8b4d3215}.token-row input{min-width:0}.token-row button{border:0;background:none;color:var(--coffee);font-size:12px;padding:8px}.actions{justify-content:flex-start;margin-top:10px}.primary,.secondary,.link-button{border-radius:5px;padding:9px 14px;border:1px solid transparent}.primary{background:var(--coffee);color:#fff}.primary:hover{background:var(--coffee-dark)}.secondary{background:#fff;border-color:#d7dbe0;color:#4e5662}.secondary:hover{border-color:var(--coffee);color:var(--coffee)}.full{width:100%;margin-top:20px}.link-button{background:none;color:var(--coffee);padding:0;border:0;font-size:12px}.nav{display:grid;gap:3px}.nav-item{border:0;background:transparent;text-align:left;padding:11px 12px;border-radius:5px;color:#5a626d}.nav-item:hover,.nav-item.active{background:#eee3dc;color:var(--coffee-dark);font-weight:600}.side-note{margin-top:auto;color:#969ca5;font-size:11px;line-height:1.65}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.view{display:none}.view.active{display:block}.quick-list{display:grid;gap:9px}.quick{display:grid;text-align:left;gap:2px;border:1px solid var(--line);background:#fff;border-radius:6px;padding:12px}.quick:hover{border-color:var(--coffee)}.quick span{font-weight:600}.quick small{color:var(--muted);font-size:11px}.hint,.hint code{color:var(--muted);font-size:11px}.result-panel{margin-top:18px}.response{margin:0;background:#1f242b;color:#dfe5eb;border-radius:5px;padding:16px;min-height:170px;max-height:430px;overflow:auto;font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;word-break:break-word}.request-grid{grid-template-columns:130px minmax(0,1fr);align-items:end}.request-grid label{margin-top:0}.request-grid .wide{min-width:0}.request-grid+.request-grid{margin-top:0}textarea{min-height:160px;resize:vertical;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}.search{width:250px}.table-panel{padding:0}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:11px;text-transform:uppercase;color:var(--muted);background:#fafafa}td code{color:var(--coffee-dark);word-break:break-all}.table-call{padding:5px 9px;font-size:11px}.facts{display:grid;grid-template-columns:80px 1fr;margin:0}.facts dt,.facts dd{padding:8px 0;border-bottom:1px solid var(--line)}.facts dt{color:var(--muted)}.facts dd{margin:0}.evidence-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}.evidence-list li{display:grid;gap:2px}.evidence-list span{color:var(--muted);font-size:12px}.file-path{font:12px ui-monospace,monospace;background:#f5f6f8;padding:9px;border-radius:4px;color:#59616d}@media(max-width:800px){.topbar{padding:0 18px}.topbar h1{font-size:16px}.layout{display:block}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:14px 16px}.nav{grid-template-columns:repeat(4,1fr)}.nav-item{text-align:center;padding:8px 3px;font-size:12px}.side-note{display:none}.content{padding:22px 16px}.grid.two{grid-template-columns:1fr}.page-heading{align-items:flex-start;flex-direction:column}.search{width:100%}.request-grid{grid-template-columns:1fr}.status{display:none}}
.order-warning{display:flex;gap:12px;align-items:flex-start;border-left:3px solid #c44747;background:#fff8f7}.order-warning strong{color:#a52d2d;white-space:nowrap}.order-warning span{color:#6b5151;font-size:13px}.order-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}.checkline{display:flex;align-items:center;gap:7px;color:#747b86;font-size:12px}.checkline input{accent-color:#8b4d32}.order-log{display:grid;gap:5px;margin-top:10px}.order-log-row{font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;color:#69717c;padding:5px 8px;border-bottom:1px solid #f0f1f3}.order-log-row.ok{color:#276749}.order-log-row.error{color:#a52d2d}.order-log-row.change{color:#8b4d32}@media(max-width:700px){.order-warning{display:block}.order-warning strong{display:block;margin-bottom:5px}}
.order-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}.order-toolbar input{flex:1 1 260px;min-width:180px}.order-toolbar select{width:150px}.order-toolbar button{white-space:nowrap}.material-status{display:inline-block;border-radius:999px;padding:3px 8px;font-size:11px;white-space:nowrap}.material-status.available{background:#e8f5ef;color:#216b4e}.material-status.soldout{background:#fff1f0;color:#a8071a}.material-status.blocked{background:#fff7e6;color:#ad6800}.material-status.other{background:#f2f3f5;color:#626a75}.muted-cell{display:block;color:#a52d2d;font-size:11px;margin-top:3px}.table-panel td{min-width:90px}.table-panel td:nth-child(2){min-width:180px}
.monitor-interval{display:flex;align-items:center;gap:6px;margin:0;color:#747b86;font-size:12px}.monitor-interval input{width:72px;min-width:72px;flex:0 0 72px;padding:7px 8px}
.material-check{width:16px;height:16px;accent-color:var(--coffee)}.table-panel th:first-child,.table-panel td:first-child{width:56px;text-align:center}.table-panel td:first-child input{margin:0}
.status #statusDot{width:8px;height:8px;border-radius:50%;background:#b7bcc3}.status.ok #statusDot{background:var(--green)}
.test-material-control{display:flex;align-items:center;gap:7px;margin:0;color:var(--muted);font-size:12px}.test-material-control span{white-space:nowrap}.test-material-control select{width:118px;padding:7px 8px}.availability-alert-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:#20242b80}.availability-alert-backdrop[hidden]{display:none}.availability-alert{width:min(520px,100%);display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:24px;box-shadow:0 20px 60px #20242b40}.availability-alert-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#e8f5ef;color:#216b4e;font-size:25px;font-weight:700}.availability-alert h3{margin:0 0 5px;font-size:20px}.availability-alert p{margin:0;color:var(--muted)}.availability-alert ul{display:grid;gap:8px;margin:16px 0;padding:0;list-style:none}.availability-alert li{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:6px}.availability-alert li span{color:var(--muted);font-size:12px}.availability-alert-actions{display:flex;gap:8px;margin-top:18px}@media(max-width:520px){.availability-alert{grid-template-columns:1fr}.availability-alert-icon{width:40px;height:40px}.availability-alert-actions{display:grid}.availability-alert-actions button{width:100%}}

/* Keep dense operational controls usable on phones without shrinking text. */
@media (max-width: 600px) {
  .topbar {
    min-height: 68px;
    height: auto;
    padding: 13px 16px;
    gap: 10px;
  }
  .topbar h1 {
    font-size: 16px;
    line-height: 1.25;
  }
  .topbar .eyebrow {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .status {
    display: flex;
    flex: 0 0 auto;
    max-width: 42%;
    justify-content: flex-end;
    text-align: right;
  }
  .status #statusText { display: none; }
  .status #loggedUserName {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .layout { min-height: calc(100vh - 68px); }
  .sidebar { padding: 12px; gap: 12px; }
  .sidebar > .panel { padding: 14px; }
  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .nav-item {
    min-height: 42px;
    padding: 9px 6px;
    line-height: 1.25;
  }
  .content { padding: 18px 12px 28px; }
  .panel { padding: 16px; }
  .page-heading { margin-bottom: 16px; gap: 8px; }
  .page-heading h2 { font-size: 22px; }
  .page-heading p { font-size: 12px; }
  .page-heading > button { width: 100%; }
  .grid.two { gap: 10px; }
  .actions { flex-wrap: wrap; }
  .actions button { min-height: 42px; flex: 1 1 110px; }
  .order-warning { padding: 14px; }
  .order-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    align-items: stretch;
  }
  .order-toolbar > input,
  .order-toolbar > select,
  .order-toolbar > button,
  .order-toolbar > .monitor-interval,
  .order-toolbar > .test-material-control,
  .order-toolbar > .selectedMaterialSummary,
  .order-toolbar > .checkline {
    width: 100%;
    min-width: 0;
  }
  .order-toolbar > button,
  .order-actions button,
  .order-toolbar .checkline {
    min-height: 44px;
  }
  .order-toolbar > button { padding: 10px 12px; }
  .monitor-interval,
  .test-material-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    align-items: center;
  }
  .monitor-interval input,
  .test-material-control select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }
  .test-material-control { grid-template-columns: 1fr; }
  .test-material-control span { white-space: normal; }
  .test-material-control small { color: var(--muted); }
  .order-toolbar .hint { display: block; }
  .checkline { justify-content: flex-start; }
  .order-toolbar + .table-panel { margin-top: 14px; }
  .table-panel { width: 100%; overflow: hidden; }
  .table-panel .panel-title { padding: 14px 16px; align-items: flex-start; flex-wrap: wrap; }
  .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-panel table { min-width: 760px; }
  th, td { padding: 11px 12px; }
  .response { max-height: 330px; padding: 12px; }
  .request-grid { gap: 10px; }
  .request-grid + label { margin-top: 12px; }
  textarea { min-height: 130px; }
  .availability-alert-backdrop { padding: 12px; }
  .availability-alert { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px; gap: 10px; }
  .availability-alert h3 { font-size: 18px; }
  .availability-alert p { font-size: 13px; }
  .availability-alert-actions button { min-height: 44px; }
}

@media (max-width: 380px) {
  .topbar { align-items: flex-start; }
  .topbar > div:first-child { min-width: 0; }
  .topbar h1 { overflow-wrap: anywhere; }
  .status #loggedUserName { max-width: 78px; }
  .content { padding-left: 9px; padding-right: 9px; }
  .panel { padding: 13px; }
}

/* The first status child is the user label, not the status indicator. */
.status #loggedUserName { width: auto; height: auto; border-radius: 0; background: transparent; }
.status.ok #loggedUserName { background: transparent; }