:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #172033;
  background: #f5f7fb;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --line: #e4e9f1;
  --line-strong: #d7deea;
  --text: #172033;
  --muted: #667085;
  --subtle: #98a2b3;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #eff6ff;
  --green: #16a66a;
  --green-soft: #ecfdf3;
  --amber: #c47a10;
  --amber-soft: #fff8e8;
  --red: #d94c59;
  --red-soft: #fff1f2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 760px; color: var(--text); background: var(--bg); font-size: 14px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: var(--primary); }
.page { width: min(1480px, calc(100% - 48px)); margin: 0 auto 64px; }

.hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 2px 22px; }
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-mark { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; color: #fff; background: var(--primary); box-shadow: 0 7px 18px rgba(37, 99, 235, .2); font-size: 20px; font-weight: 800; }
.eyebrow { margin-bottom: 4px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0 0 4px; color: #172033; font-size: clamp(24px, 2.4vw, 31px); line-height: 1.12; letter-spacing: -.025em; }
.hero p { margin: 0; color: var(--muted); font-size: 14px; }
.system-state { display: flex; align-items: flex-end; flex-direction: column; gap: 6px; }
.bridge { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #bee7d2; border-radius: 999px; color: #147a51; background: var(--green-soft); font-size: 13px; font-weight: 700; }
.bridge i, .status > i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.bridge.warning { color: #96620e; border-color: #f1d69e; background: var(--amber-soft); }
.bridge.warning i { background: #d18a17; }
.database-state { color: var(--subtle); font-size: 12px; }

.main-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-bottom: 16px; padding: 7px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .82); box-shadow: 0 3px 12px rgba(16, 24, 40, .045); }
.main-tab { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 66px; padding: 10px 14px; overflow: hidden; border: 1px solid transparent; border-radius: 10px; color: #475467; background: transparent; text-align: left; transition: color .15s, border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.main-tab::after { content: ""; position: absolute; right: 18px; bottom: 0; left: 18px; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); opacity: 0; transform: scaleX(.35); transition: opacity .15s, transform .15s; }
.main-tab:hover { color: #344054; border-color: #e2e8f0; background: #fff; transform: translateY(-1px); }
.main-tab:focus-visible { outline: 3px solid rgba(37, 99, 235, .18); outline-offset: 1px; }
.main-tab.active { color: #1d4ed8; border-color: #c9d9f7; background: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, .09); }
.main-tab.active::after { opacity: 1; transform: scaleX(1); }
.main-tab-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #dfe5ed; border-radius: 10px; color: #667085; background: #f8fafc; font-size: 12px; font-weight: 800; letter-spacing: -.02em; }
.main-tab.active .main-tab-icon { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 4px 10px rgba(37, 99, 235, .18); }
.main-tab-copy { display: block; min-width: 0; }
.main-tab-copy strong, .main-tab-copy small { display: block; }
.main-tab-copy strong { color: inherit; font-size: 14px; line-height: 1.35; }
.main-tab-copy small { margin-top: 3px; overflow: hidden; color: #98a2b3; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.main-tab.active .main-tab-copy small { color: #6f8fc8; }
.main-tab-arrow { color: #a6afbc; font-size: 18px; line-height: 1; transition: color .15s, transform .15s; }
.main-tab:hover .main-tab-arrow, .main-tab.active .main-tab-arrow { color: var(--primary); transform: translateX(2px); }
.main-tab-count { display: inline-flex; align-items: baseline; gap: 3px; min-width: 48px; padding: 5px 8px; border: 1px solid #e0e5ec; border-radius: 999px; color: #667085; background: #f8fafc; font-size: 11px; font-weight: 700; white-space: nowrap; }
.main-tab-count b { color: #344054; font-size: 13px; font-variant-numeric: tabular-nums; }
.main-tab.active .main-tab-count { color: #4f70a8; border-color: #c7d8f6; background: #eff6ff; }
.main-tab.active .main-tab-count b { color: #1d4ed8; }
.app-view[hidden] { display: none !important; }

.workflow { display: grid; grid-template-columns: auto minmax(30px, 1fr) auto minmax(30px, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 16px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 2px 8px rgba(16, 24, 40, .035); }
.workflow-step { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.workflow-step > span { display: grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; border: 1px solid var(--line-strong); border-radius: 50%; color: #7b8798; background: #fff; font-size: 12px; font-weight: 700; }
.workflow-step strong, .workflow-step small { display: block; white-space: nowrap; }
.workflow-step strong { color: #475467; font-size: 13px; }
.workflow-step small { margin-top: 2px; color: var(--subtle); font-size: 11px; }
.workflow-step.active > span { color: #fff; border-color: var(--primary); background: var(--primary); }
.workflow-step.active strong { color: var(--primary); }
.workflow-step.complete > span { color: var(--green); border-color: #a7dfc4; background: var(--green-soft); }
.workflow-step.complete strong { color: #2a7658; }
.workflow-line { height: 1px; background: #e6ebf2; }

.panel { margin-top: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 3px 12px rgba(16, 24, 40, .045); }
.section-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 17px; }
.section-head > span { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font: 800 11px/1 ui-monospace, monospace; }
.section-head h2 { margin: 0 0 4px; color: #1d2939; font-size: 18px; line-height: 1.2; }
.section-head p { margin: 0; color: var(--subtle); font-size: 13px; }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 11px; padding: 9px 10px 9px 13px; border: 1px solid #edf0f5; border-radius: 10px; background: var(--surface-soft); }
.toolbar-meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.toolbar-meta strong { color: #344054; font-size: 20px; }
.toolbar-meta i { width: 1px; height: 13px; margin: 0 4px; background: var(--line); }

.grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { color: #475467; font-size: 13px; font-weight: 700; }
.field input, .field select, .task-filters input, .task-filters select { width: 100%; min-height: 40px; padding: 8px 10px; color: #1d2939; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.field input:hover, .field select:hover, .task-filters input:hover, .task-filters select:hover { border-color: #b9c2d0; }
.field input:focus, .field select:focus, .task-filters input:focus, .task-filters select:focus { outline: none; border-color: #7aa7f7; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.check { display: flex; align-items: center; gap: 8px; min-height: 40px; padding-top: 17px; color: #475467; font-size: 13px; }
.check input { width: 16px; height: 16px; accent-color: var(--primary); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn { min-height: 37px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 8px; color: #344054; background: #fff; font-size: 13px; font-weight: 700; transition: border-color .14s, background .14s, box-shadow .14s, transform .14s; }
.btn:hover:not(:disabled) { border-color: #b8c2d0; background: #f9fafb; box-shadow: 0 2px 5px rgba(16, 24, 40, .06); transform: translateY(-1px); }
.btn:active:not(:disabled) { box-shadow: none; transform: translateY(0); }
.btn.primary { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 3px 8px rgba(37, 99, 235, .17); }
.btn.primary:hover:not(:disabled) { color: #fff; border-color: var(--primary-hover); background: var(--primary-hover); }
.btn.danger { color: #b42332; border-color: #f0c6cb; background: #fff7f8; }
.btn.danger:hover:not(:disabled) { border-color: #e9aeb6; background: #fff1f2; }
.btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.btn.row-action { min-height: 29px; padding: 0 9px; font-size: 12px; }
.btn b { margin-right: 2px; font-size: 14px; font-weight: 500; }

.hint { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.hint > span { padding: 2px 6px; border-radius: 4px; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 800; }
.hint code { color: #37527a; }
.notice { margin-top: 11px; padding: 10px 12px; border: 1px solid #f1d69e; border-radius: 9px; color: #85580e; background: var(--amber-soft); font-size: 12px; }
.notice strong { margin-right: 6px; color: #a3670b; }
.status { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 12px; padding: 9px 11px; border: 1px solid #d8e6f7; border-radius: 9px; color: #486581; background: #f5f9ff; font-size: 13px; }
.status > i { background: var(--primary); }
.status.negative { color: #a93440; border-color: #f2cdd1; background: var(--red-soft); }
.status.negative > i { background: var(--red); }

.progress-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 13px; }
.progress { height: 6px; overflow: hidden; border-radius: 999px; background: #e9edf3; }
.progress > div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4d83e8, #22b779); transition: width .25s ease; }
.progress-row > strong { min-width: 66px; text-align: right; color: #667085; font-size: 12px; font-variant-numeric: tabular-nums; }

.summary { display: grid; gap: 10px; margin: 15px 0; }
.card { position: relative; min-height: 88px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.card::before { content: ""; position: absolute; top: 0; left: 13px; right: 13px; height: 2px; border-radius: 0 0 2px 2px; background: #cdd5df; }
.card span { color: #667085; font-size: 12px; font-weight: 700; }
.card strong { display: block; margin: 7px 0 2px; color: #344054; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.card small { color: #a0a9b7; font-size: 11px; }
.card[data-tone="blue"]::before { background: #5b8def; }
.card[data-tone="blue"] strong { color: #2563eb; }
.card[data-tone="green"]::before { background: #31b87c; }
.card[data-tone="green"] strong { color: #14915b; }
.card[data-tone="amber"]::before { background: #dea13b; }
.card[data-tone="amber"] strong { color: #b26b0a; }
.card[data-tone="red"]::before { background: #e17882; }
.card[data-tone="red"] strong { color: #c6414d; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th { position: sticky; top: 0; z-index: 2; padding: 10px 9px; text-align: left; white-space: nowrap; color: #667085; border-bottom: 1px solid var(--line-strong); background: #f8fafc; font-size: 12px; font-weight: 800; }
td { padding: 10px 9px; border-bottom: 1px solid #edf0f4; color: #475467; vertical-align: middle; }
tbody tr { transition: background .12s ease; }
tbody tr:hover td { background: #f8fbff; }
tbody tr:last-child td { border-bottom: 0; }
.muted { color: var(--subtle); }

@media (max-width: 1100px) {
  .page { width: calc(100% - 28px); }
  .workflow-step small { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
/* Authentication and deployment administration */
[hidden]{display:none!important}
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:32px;background:linear-gradient(145deg,#f7fbff,#eef5ff)}
.auth-card{width:min(440px,100%);display:grid;gap:18px;padding:38px;border:1px solid #dfe8f4;border-radius:24px;background:#fff;box-shadow:0 24px 70px rgba(35,78,130,.13)}
.auth-card .brand-mark{width:54px;height:54px}.auth-card h1{margin:0;font-size:28px;color:#162033}.auth-card>p{margin:0;color:#64748b}
.auth-card label{display:grid;gap:8px;font-size:15px;font-weight:700;color:#334155}.auth-card input{height:46px;padding:0 14px;border:1px solid #cdd9e8;border-radius:11px;font:inherit;background:#fbfdff}
.auth-card input:focus{outline:3px solid rgba(59,130,246,.13);border-color:#4b8ff7}.auth-card .btn{height:46px;font-size:16px}.auth-message{min-height:22px;color:#c2413b!important;font-weight:650}
.account-menu{position:relative}.account-trigger{display:flex;align-items:center;gap:9px;min-height:42px;padding:5px 9px 5px 6px;border:1px solid #dce5f0;border-radius:13px;color:#334155;background:#fff;box-shadow:0 2px 8px rgba(35,61,94,.06);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}.account-trigger:hover{border-color:#bfd1e8;box-shadow:0 5px 16px rgba(35,61,94,.10);transform:translateY(-1px)}.account-trigger:focus-visible{outline:3px solid rgba(59,130,246,.16);outline-offset:2px}.account-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff;background:linear-gradient(145deg,#397de8,#285fd0);font-size:13px;font-weight:800}.current-user{max-width:180px;overflow:hidden;font-size:14px;font-weight:750;color:#334155;text-overflow:ellipsis;white-space:nowrap}.account-caret{color:#8190a4;font-size:17px;line-height:1;transition:transform .15s}.account-trigger[aria-expanded="true"] .account-caret{transform:rotate(180deg)}
.account-dropdown{position:absolute;z-index:60;top:calc(100% + 9px);right:0;width:238px;padding:7px;border:1px solid #dce5f0;border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(31,55,86,.16)}.account-dropdown::before{content:"";position:absolute;right:18px;top:-5px;width:9px;height:9px;border-top:1px solid #dce5f0;border-left:1px solid #dce5f0;background:#fff;transform:rotate(45deg)}.account-dropdown button{position:relative;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:10px;color:#334155;background:transparent;text-align:left;cursor:pointer}.account-dropdown button:hover,.account-dropdown button:focus-visible{outline:0;background:#f1f6fd}.account-dropdown button>span:first-child{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#426b9f;background:#eaf2fc;font-size:12px;font-weight:800}.account-dropdown button strong,.account-dropdown button small{display:block}.account-dropdown button strong{font-size:14px}.account-dropdown button small{margin-top:2px;color:#8290a3;font-size:12px;font-weight:500}.account-dropdown #logoutButton{margin-top:3px;border-top:1px solid #edf1f6;border-radius:0 0 10px 10px}.account-dropdown #logoutButton>span:first-child{color:#b44848;background:#fff0f0}
.admin-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}.admin-card{min-width:0;padding:20px;border:1px solid #e1e8f2;border-radius:16px;background:#fbfdff}.admin-card-wide{grid-column:1/-1}
.admin-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.admin-card h3{margin:0 0 5px;font-size:18px;color:#1e293b}.admin-card p{margin:0;color:#64748b;font-size:14px}
.admin-table{width:100%;border-collapse:collapse;font-size:14px}.admin-table th,.admin-table td{padding:11px 10px;text-align:left;border-bottom:1px solid #e6edf5;white-space:nowrap}.admin-table th{color:#64748b;background:#f5f8fc}
.backup-list{display:grid;gap:9px;max-height:340px;overflow:auto}.backup-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #e1e8f2;border-radius:11px;background:#fff}.backup-item strong{display:block;font-size:13px}.backup-item small{color:#64748b}
.role-chip{display:inline-flex;padding:4px 8px;border-radius:999px;background:#eaf2ff;color:#2864b2;font-size:12px;font-weight:750}.role-chip.disabled{background:#f1f3f6;color:#788392}
@media(max-width:900px){.admin-grid{grid-template-columns:1fr}.admin-card-wide{grid-column:auto}.system-state{flex-wrap:wrap}.auth-card{padding:26px}}