* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, "Microsoft YaHei", Arial, sans-serif; background: #f7f7f8; color: #18181b; }
a { color: inherit; text-decoration: none; }
.topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: #fff; border-bottom: 1px solid #e4e4e7; position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 700; }
.topbar nav { display: flex; align-items: center; gap: 6px; font-size: 14px; flex-wrap: wrap; }
.topbar nav > a { padding: 8px 10px; border-radius: 6px; color: #52525b; }
.topbar nav > a:hover { background: #f4f4f5; color: #18181b; }
.topbar nav > a.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.topbar nav button, .filters button, .primary { border: 0; border-radius: 8px; background: #2563eb; color: #fff; padding: 9px 14px; cursor: pointer; }
.topbar nav form { margin: 0; }
.container { max-width: 1280px; margin: 0 auto; padding: 28px 24px 56px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { margin: 0 0 6px; font-size: 24px; }
.page-head p { margin: 0; color: #71717a; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stats-wide { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.stats div, .table-wrap, .login-card, .panel { background: #fff; border: 1px solid #e4e4e7; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.stats div { padding: 20px; }
.stats strong { display: block; font-size: 32px; }
.stats span, small { color: #71717a; }
.filters { display: flex; gap: 10px; margin-bottom: 16px; }
input, select { border: 1px solid #d4d4d8; border-radius: 8px; padding: 9px 11px; font: inherit; background: #fff; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid #eeeef0; }
th { background: #fafafa; color: #52525b; font-weight: 600; white-space: nowrap; }
td strong { display: block; margin-bottom: 4px; }
td small { display: block; line-height: 1.5; }
.tag { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 7px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; }
.tag.warn { background: #fffbeb; color: #b45309; }
.tag.info { background: #eff6ff; color: #1d4ed8; }
.tag.tool { background: #f5f3ff; color: #6d28d9; }
.tag.resource { background: #ecfdf5; color: #047857; }
.status { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.status.ok { background: #ecfdf5; color: #047857; }
.status.draft { background: #f4f4f5; color: #71717a; }
.empty { text-align: center; color: #a1a1aa; padding: 32px; }
.empty.small { padding: 16px; }
h2 { font-size: 18px; margin: 28px 0 12px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.panel { padding: 18px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-size: 17px; }
.panel-head a { color: #2563eb; font-size: 13px; }
.count { color: #71717a; font-size: 13px; }
.quad-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quad-card { padding: 14px; border-radius: 8px; border: 1px solid #e4e4e7; }
.quad-card b { display: block; font-size: 26px; }
.quad-card span { color: #52525b; font-size: 13px; }
.quad-card.green { background: #ecfdf5; border-color: #bbf7d0; }
.quad-card.amber { background: #fffbeb; border-color: #fde68a; }
.quad-card.blue { background: #eff6ff; border-color: #bfdbfe; }
.quad-card.red { background: #fef2f2; border-color: #fecaca; }
.mini-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini-list div { border: 1px solid #eeeef0; border-radius: 8px; padding: 14px; }
.mini-list span { color: #71717a; display: block; }
.mini-list strong { font-size: 26px; }
.rank-row, .opportunity-row, .resource-detail { border-top: 1px solid #eeeef0; padding: 10px 0; }
.rank-row:first-of-type, .opportunity-row:first-of-type, .resource-detail:first-of-type { border-top: 0; }
.rank-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opportunity-row strong, .resource-detail strong { display: block; margin-bottom: 4px; }
.compact-head { margin-bottom: 14px; }
.replace-filters { align-items: center; }
.replace-filters input:not([type="hidden"]) { width: min(280px, 100%); }
.secondary-button { border: 1px solid #d4d4d8; border-radius: 8px; padding: 8px 13px; background: #fff; color: #52525b; font-size: 14px; }
.secondary-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; font-family: inherit; cursor: pointer; }
.primary-button { border: 0; border-radius: 8px; padding: 9px 14px; background: #2563eb; color: #fff; font-size: 14px; }
.primary-button:hover { background: #1d4ed8; }
.replace-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; position: sticky; top: 64px; z-index: 10; padding: 6px 0; background: #f7f7f8; }
.replace-tab { min-width: 0; height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; color: #52525b; font-size: 13px; }
.replace-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replace-tab strong { min-width: 24px; text-align: right; color: #18181b; font-size: 17px; }
.replace-tab:hover { border-color: #a1a1aa; }
.replace-tab.active { border-color: #2563eb; box-shadow: inset 0 -3px 0 #2563eb; color: #1d4ed8; }
.replace-tab.disagreement.active { border-color: #d97706; box-shadow: inset 0 -3px 0 #d97706; color: #92400e; }
.replace-tab.not_suitable.active { border-color: #dc2626; box-shadow: inset 0 -3px 0 #dc2626; color: #991b1b; }
.replace-results { overflow: hidden; border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.replace-results-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid #e4e4e7; background: #fafafa; }
.replace-results-head > div { display: flex; align-items: baseline; gap: 10px; }
.replace-results-head h2 { margin: 0; font-size: 16px; }
.replace-results-head span { color: #71717a; font-size: 12px; }
.replace-item { border-bottom: 1px solid #eeeef0; }
.replace-item:last-child { border-bottom: 0; }
.replace-item summary { min-height: 66px; display: grid; grid-template-columns: 4px minmax(260px, 1fr) minmax(120px, .36fr) auto 18px; align-items: center; gap: 14px; padding: 9px 16px; cursor: pointer; list-style: none; }
.replace-item summary::-webkit-details-marker { display: none; }
.replace-item summary:hover { background: #fafafa; }
.replace-item summary:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.replace-indicator { width: 4px; height: 34px; border-radius: 2px; background: #a1a1aa; }
.replace-indicator.replace { background: #059669; }
.replace-indicator.assist { background: #2563eb; }
.replace-indicator.disagreement { background: #d97706; }
.replace-indicator.not_suitable { background: #dc2626; }
.replace-item-main { min-width: 0; }
.replace-item-main strong { display: block; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.replace-item-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.responsibility-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #52525b; font-size: 12px; }
.replace-summary-flags { display: flex; align-items: center; gap: 5px; }
.binary { padding: 3px 6px; border-radius: 5px; background: #f4f4f5; color: #71717a; font-size: 11px; white-space: nowrap; }
.binary.yes { background: #ecfdf5; color: #047857; }
.binary.no { color: #a1a1aa; }
.replace-chevron { color: #71717a; transition: transform .15s ease; }
.replace-item[open] .replace-chevron { transform: rotate(180deg); }
.replace-item[open] summary { background: #fafafa; }
.replace-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 16px 52px 18px 34px; border-top: 1px solid #f4f4f5; background: #fcfcfc; }
.replace-detail h3 { margin: 0 0 9px; color: #3f3f46; font-size: 12px; }
.replace-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; font-size: 12px; line-height: 1.45; }
.replace-detail dt { color: #a1a1aa; }
.replace-detail dd { min-width: 0; margin: 0; color: #3f3f46; overflow-wrap: anywhere; }
.replace-detail .original-text { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid #e4e4e7; }
.replace-detail .original-text p { margin: 0; color: #52525b; font-size: 12px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 54px; border-top: 1px solid #e4e4e7; font-size: 13px; }
.pagination a { color: #1d4ed8; }
.pagination span { color: #a1a1aa; }
.pagination strong { font-size: 12px; }
.page-head-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.page-head-actions > div:first-child { min-width: 0; }
.command-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.back-link { display: inline-block; margin-bottom: 10px; color: #2563eb; font-size: 13px; }
.notice { margin: 0 0 16px; padding: 11px 14px; border: 1px solid #d4d4d8; border-radius: 8px; background: #fff; font-size: 13px; line-height: 1.5; }
.notice.success { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.notice.warn { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.notice.error-list { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.notice.error-list > div { margin-top: 4px; }
.user-stats { margin-bottom: 16px; }
.user-filters { align-items: center; }
.user-list-wrap { overflow: hidden; border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.list-toolbar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e4e4e7; background: #fafafa; }
.list-toolbar span { color: #71717a; font-size: 12px; }
.user-table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.user-table td { vertical-align: middle; }
.user-table td > strong { margin-bottom: 2px; }
.select-column { width: 40px; text-align: center; }
.select-column input { accent-color: #dc2626; }
.actions-column { width: 280px; }
.bulk-delete-form { margin: 0; }
.danger-button { border: 1px solid #dc2626; border-radius: 7px; padding: 8px 11px; background: #fff; color: #b91c1c; font: inherit; font-size: 12px; cursor: pointer; }
.danger-button:hover:not(:disabled) { background: #fef2f2; }
.danger-button:disabled { border-color: #d4d4d8; color: #a1a1aa; cursor: not-allowed; }
.row-actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 12px; }
.row-actions a, .link-button { color: #2563eb; }
.row-actions form { margin: 0; }
.link-button { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; }
.danger-text { color: #dc2626; }
.account-form, .import-form { max-width: 940px; margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid label, .upload-field { display: grid; gap: 7px; color: #3f3f46; font-size: 13px; }
.form-grid input { width: 100%; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #e4e4e7; }
.upload-field { padding: 18px; border: 1px dashed #a1a1aa; border-radius: 8px; background: #fafafa; }
.upload-field input { padding: 8px 0; border: 0; background: transparent; }
.upload-field small { line-height: 1.5; }
.import-rules { display: grid; gap: 7px; margin-top: 18px; color: #52525b; font-size: 13px; }
.import-rules strong { color: #18181b; }
.credentials-wrap { border-radius: 8px; }
.credentials-wrap td:nth-child(2) strong { font-family: Consolas, monospace; letter-spacing: 0; }
.pill { display: inline-block; min-width: 54px; margin-right: 8px; padding: 2px 6px; border-radius: 999px; font-style: normal; text-align: center; font-size: 12px; }
.pill.info { background: #eff6ff; color: #1d4ed8; }
.pill.tool { background: #f5f3ff; color: #6d28d9; }
.pill.resource { background: #ecfdf5; color: #047857; }
.compact-list { max-height: 760px; overflow: auto; padding-right: 4px; }
.login-page { min-height: 100vh; display: grid; place-items: center; }
.login-card { width: min(420px, calc(100vw - 32px)); padding: 28px; }
.login-card h1 { margin: 0 0 8px; }
.login-card p { margin: 0 0 20px; color: #71717a; }
.login-card label { display: grid; gap: 7px; margin-bottom: 14px; color: #52525b; }
.login-card input { width: 100%; }
.login-card .primary { width: 100%; margin-top: 8px; }
.error { margin-bottom: 14px; padding: 10px 12px; border-radius: 8px; background: #fef2f2; color: #dc2626; }
@media (max-width: 1100px) {
  .stats-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .replace-item summary { grid-template-columns: 4px minmax(220px, 1fr) minmax(100px, .32fr) 18px; }
  .replace-summary-flags { display: none; }
}
@media (max-width: 700px) {
  .topbar { height: auto; align-items: flex-start; gap: 12px; padding: 14px; flex-direction: column; }
  .topbar nav { gap: 4px; }
  .topbar nav > a { padding: 7px 8px; }
  .container { padding: 20px 14px 40px; }
  .stats, .stats-wide, .quad-summary, .mini-list { grid-template-columns: 1fr; }
  .filters { flex-direction: column; }
  .replace-filters { align-items: stretch; }
  .replace-filters input:not([type="hidden"]) { width: 100%; }
  .replace-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; }
  .replace-tab { height: 44px; }
  .replace-tab:last-child { grid-column: 1 / -1; }
  .replace-results-head { align-items: flex-start; }
  .replace-item summary { grid-template-columns: 4px minmax(0, 1fr) 18px; gap: 10px; padding: 10px 12px; }
  .responsibility-name { display: none; }
  .replace-detail { grid-template-columns: 1fr; gap: 16px; padding: 15px 18px 18px 26px; }
  .replace-detail .original-text { grid-column: auto; }
  .page-head-actions { flex-direction: column; }
  .command-bar { width: 100%; justify-content: flex-start; }
  .user-filters { align-items: stretch; }
  .user-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .user-stats div { padding: 14px; }
  .user-stats strong { font-size: 26px; }
  .user-table { min-width: 850px; }
  .form-grid { grid-template-columns: 1fr; }
  .account-form, .import-form { padding: 16px; }
}