:root {
  color: #20242b;
  background: #f6f7f9;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: #f6f7f9; }
.login-panel { width: min(440px, 100%); padding: 36px; border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; box-shadow: 0 14px 34px rgb(20 31 45 / 8%); }
.brand-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.brand-lockup img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; border: 1px solid #eef0f3; }
.brand-lockup h1 { margin: 0; font-size: 21px; letter-spacing: 0; }
.brand-lockup p { margin: 5px 0 0; color: #707784; font-size: 13px; line-height: 1.5; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0, 1fr); }
.sidebar { display: flex; flex-direction: column; gap: 18px; padding: 22px 14px; border-right: 1px solid #e5e7eb; background: #fff; }
.sidebar .brand-lockup { margin: 0 8px 14px; }
.sidebar .brand-lockup img { width: 38px; height: 38px; border-radius: 9px; }
.sidebar .brand-lockup h1 { font-size: 15px; }
.sidebar .brand-lockup p { display: none; }
.nav { display: grid; gap: 4px; }
.nav button { display: flex; align-items: center; width: 100%; min-height: 40px; border: 0; border-radius: 5px; padding: 0 12px; color: #69707c; background: transparent; text-align: left; }
.nav button:hover { color: #242a33; background: #f3f5f7; }
.nav button.active { color: #1d2732; background: #e9eef2; font-weight: 650; }
.sidebar-footer { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid #edf0f2; color: #7b828c; font-size: 12px; line-height: 1.6; }

.workspace { min-width: 0; }
.topbar { height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 30px; border-bottom: 1px solid #e5e7eb; background: #fff; }
.page-title { margin: 0; font-size: 18px; font-weight: 700; }
.topbar-meta { display: flex; align-items: center; gap: 13px; color: #626975; font-size: 13px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; color: #fff; background: #27313c; border-radius: 50%; font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.content { padding: 28px 30px 46px; max-width: 1480px; }
.content-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.content-head p { margin: 4px 0 0; color: #737a85; font-size: 13px; }

.button { min-height: 38px; border: 1px solid #d9dde2; border-radius: 5px; padding: 0 13px; color: #242a32; background: #fff; font-weight: 600; }
.button:hover { border-color: #abb4be; background: #f8f9fa; }
.button.primary { border-color: #22272e; color: #fff; background: #22272e; }
.button.primary:hover { background: #38414b; }
.button.danger { border-color: #db5d63; color: #b6323a; }
.button.small { min-height: 32px; padding: 0 10px; font-size: 13px; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }

.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 20px; border: 1px solid #e1e5e9; border-radius: 7px; overflow: hidden; background: #fff; }
.metric { min-height: 108px; padding: 20px; border-right: 1px solid #e9ecef; }
.metric:last-child { border-right: 0; }
.metric-label { color: #717985; font-size: 13px; }
.metric-value { margin-top: 12px; color: #212831; font-size: 28px; font-weight: 750; }
.metric-note { margin-top: 4px; color: #8a919a; font-size: 12px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.search { flex: 1 1 220px; min-width: 180px; height: 39px; border: 1px solid #dfe3e7; border-radius: 5px; padding: 0 12px; outline: none; background: #fff; }
.search:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: #697785; box-shadow: 0 0 0 3px rgb(83 100 115 / 10%); outline: none; }
.filter { min-height: 37px; border: 1px solid #dfe3e7; border-radius: 5px; padding: 0 10px; color: #464e57; background: #fff; }

.table-wrap { overflow-x: auto; border: 1px solid #e1e5e9; border-radius: 7px; background: #fff; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
th { height: 44px; padding: 0 15px; color: #747c87; background: #f8f9fa; border-bottom: 1px solid #e4e7ea; text-align: left; font-size: 12px; font-weight: 650; white-space: nowrap; }
td { padding: 13px 15px; border-bottom: 1px solid #edf0f2; color: #313842; font-size: 13px; vertical-align: middle; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #f8fafb; }
tbody tr:last-child td { border-bottom: 0; }
.style-code { color: #1f2933; font-weight: 700; }
.subtle { color: #848b94; font-size: 12px; }
.empty { padding: 70px 20px; color: #838a94; text-align: center; }

.status { display: inline-flex; align-items: center; min-height: 23px; border-radius: 4px; padding: 0 7px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.status.dispatched { color: #3260a4; background: #eaf1fb; }
.status.received { color: #16705c; background: #e5f5f0; }
.status.processing { color: #71621c; background: #f9f4d8; }
.status.exception { color: #b23d42; background: #fbe9ea; }
.status.submitted { color: #6d4c99; background: #eee8f8; }
.status.closed { color: #4d6b54; background: #e9f0ea; }
.status.cancelled, .status.draft { color: #727983; background: #edf0f2; }
.progress { min-width: 84px; color: #4c5661; font-variant-numeric: tabular-nums; }

.management-grid { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.7fr); gap: 20px; }
.section-box { border: 1px solid #e1e5e9; border-radius: 7px; background: #fff; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 20px; border-bottom: 1px solid #e8ebee; }
.section-head h2 { margin: 0; font-size: 15px; }
.section-body { padding: 20px; }
.simple-list { margin: 0; padding: 0; list-style: none; }
.simple-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf0f2; font-size: 13px; }
.simple-list li:last-child { border-bottom: 0; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #4d5560; font-size: 13px; font-weight: 650; }
.field input, .field select, .field textarea { width: 100%; min-height: 39px; border: 1px solid #dce1e5; border-radius: 5px; padding: 8px 10px; color: #252b33; background: #fff; }
.field textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.hint { margin: 8px 0 0; color: #7d858f; font-size: 12px; line-height: 1.6; }
.divider { height: 1px; margin: 20px 0; background: #e9edf0; }

dialog { width: min(780px, calc(100vw - 28px)); max-height: min(88vh, 900px); overflow: auto; border: 1px solid #e2e5e8; border-radius: 8px; padding: 0; box-shadow: 0 22px 60px rgb(18 28 39 / 22%); }
dialog::backdrop { background: rgb(25 31 38 / 40%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 22px; border-bottom: 1px solid #e8ebee; background: #fff; position: sticky; top: 0; z-index: 2; }
.modal-head h2 { margin: 0; font-size: 17px; }
.icon-close { width: 34px; height: 34px; border: 0; border-radius: 5px; color: #6e767f; background: transparent; font-size: 23px; line-height: 1; }
.icon-close:hover { background: #f1f3f5; }
.modal-body { padding: 22px; }
.task-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 22px; border: 1px solid #e6e9ec; border-radius: 6px; overflow: hidden; }
.task-meta div { min-height: 72px; padding: 13px; border-right: 1px solid #e8ebee; border-bottom: 1px solid #e8ebee; }
.task-meta div:nth-child(3n) { border-right: 0; }
.task-meta div:nth-last-child(-n + 3) { border-bottom: 0; }
.task-meta span { display: block; color: #7c8490; font-size: 12px; }
.task-meta strong { display: block; margin-top: 8px; color: #28313b; font-size: 13px; word-break: break-word; }
.requirements { margin-bottom: 20px; padding: 16px; border-left: 3px solid #4c5c6c; color: #414a54; background: #f8fafb; font-size: 13px; line-height: 1.75; white-space: pre-wrap; }
.requirements-title { margin-bottom: 7px; color: #59636f; font-size: 12px; font-weight: 700; }
.timeline { margin-top: 14px; }
.timeline-item { position: relative; padding: 0 0 18px 22px; border-left: 1px solid #dfe4e8; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { position: absolute; left: -5px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: #526473; content: ""; }
.timeline-time { color: #7a838d; font-size: 12px; }
.timeline-content { margin-top: 5px; color: #3d4651; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }

#toast { position: fixed; left: 50%; bottom: 28px; z-index: 10; transform: translate(-50%, 15px); max-width: min(520px, calc(100vw - 34px)); border-radius: 5px; padding: 10px 14px; color: #fff; background: #26313b; box-shadow: 0 12px 28px rgb(18 28 39 / 22%); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 4; flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid #e5e7eb; }
  .sidebar .brand-lockup { display: none; }
  .nav { display: flex; gap: 4px; }
  .nav button { width: auto; white-space: nowrap; }
  .sidebar-footer { display: none; }
  .topbar { height: 60px; padding: 0 16px; }
  .content { padding: 20px 16px 36px; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n + 2) { border-bottom: 1px solid #e9ecef; }
  .management-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .task-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-meta div:nth-child(3n) { border-right: 1px solid #e8ebee; }
  .task-meta div:nth-child(2n) { border-right: 0; }
  .task-meta div:nth-last-child(-n + 3) { border-bottom: 1px solid #e8ebee; }
  .task-meta div:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 480px) {
  .login-panel { padding: 28px 22px; }
  .summary { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid #e9ecef; }
  .metric:last-child { border-bottom: 0; }
  .metric:nth-child(-n + 2) { border-bottom: 1px solid #e9ecef; }
  .task-meta { grid-template-columns: 1fr; }
  .task-meta div, .task-meta div:nth-child(3n), .task-meta div:nth-child(2n) { border-right: 0; border-bottom: 1px solid #e8ebee; }
  .task-meta div:last-child { border-bottom: 0; }
}