:root {
  --ink: #162128;
  --muted: #68757c;
  --line: #dce3e2;
  --soft-line: #edf1ef;
  --paper: #ffffff;
  --canvas: #f3f6f3;
  --nav: #12251f;
  --nav-soft: #1b332b;
  --accent: #ec6a3a;
  --accent-dark: #d55428;
  --mint: #dcefe5;
  --green: #237a55;
  --amber: #b26a13;
  --red: #bb3a3a;
  --blue: #2563a9;
  --shadow: 0 14px 40px rgba(20, 43, 34, .08);
  --radius: 16px;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 1120px; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.boot { position: fixed; inset: 0; display: grid; place-content: center; gap: 14px; justify-items: center; color: var(--muted); background: var(--canvas); z-index: 100; }
.spinner { width: 28px; height: 28px; border: 3px solid #d7dfdc; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 1.15fr) minmax(470px, .85fr); background: var(--paper); }
.login-visual { position: relative; overflow: hidden; padding: 9vh 8vw; display: flex; flex-direction: column; justify-content: center; color: #fff; background: radial-gradient(circle at 30% 25%, #2e5849 0, #173a30 40%, #10261f 100%); }
.login-visual::before { content:""; position:absolute; width:540px; height:540px; right:-180px; bottom:-180px; border:1px solid rgba(255,255,255,.15); border-radius:50%; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.02); }
.login-visual h1 { margin: 20px 0 22px; font-family: Georgia, "Songti SC", serif; font-size: clamp(44px, 4vw, 68px); font-weight: 500; line-height: 1.14; letter-spacing: -.03em; }
.login-visual > p:last-of-type { max-width: 540px; color: #bdd0c8; font-size: 17px; line-height: 1.8; }
.login-orbit { position: absolute; right: 10%; top: 17%; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.login-orbit i { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 24px var(--accent); }
.login-orbit i:nth-child(1) { top: 14px; left: 42px; }.login-orbit i:nth-child(2) { right: 6px; top: 80px; }.login-orbit i:nth-child(3) { left: 8px; bottom: 34px; }
.login-panel { display: grid; place-items: center; padding: 56px; }
.login-card { width: min(410px, 100%); }
.login-card h2 { margin: 10px 0 8px; font-size: 32px; }
.mobile-brand { display:none; }
.eyebrow { margin: 0; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.muted { color: var(--muted); }
.security-note { margin: 22px 0 0; text-align:center; color:#8b969a; font-size:12px; }

.admin-shell { min-height: 100vh; display:grid; grid-template-columns: 248px 1fr; }
.sidebar { position:fixed; inset:0 auto 0 0; width:248px; display:flex; flex-direction:column; padding:26px 18px 20px; color:#d9e4df; background:var(--nav); }
.brand { display:flex; gap:12px; align-items:center; padding:0 10px 24px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand-mark { flex:none; width:38px; height:38px; display:grid; place-items:center; transform:rotate(45deg); border-radius:11px; color:#fff; background:var(--accent); box-shadow:0 6px 18px rgba(236,106,58,.27); }
.brand-mark span { transform:rotate(-45deg); font-family:Georgia,"Songti SC",serif; font-weight:700; }
.brand-mark-large { width:54px; height:54px; font-size:22px; }
.brand strong { display:block; color:white; letter-spacing:.02em; }.brand small { display:block; margin-top:3px; color:#81968e; font-size:11px; }
.nav { flex:1; padding-top:16px; }
.nav-section { margin:20px 12px 8px; color:#657d74; font-size:11px; font-weight:700; letter-spacing:.12em; }
.nav a { display:flex; align-items:center; gap:12px; margin:4px 0; padding:11px 13px; border-radius:10px; color:#aebfb8; font-size:14px; transition:.16s ease; }
.nav a:hover { color:#fff; background:rgba(255,255,255,.055); }.nav a.active { color:#fff; background:var(--nav-soft); box-shadow:inset 3px 0 var(--accent); }
.nav-icon { width:20px; text-align:center; font-size:18px; }
.sidebar-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:16px 8px 0; border-top:1px solid rgba(255,255,255,.08); }
.mode-badge { padding:5px 8px; border-radius:999px; color:#9de2bd; background:rgba(83,189,132,.12); font-size:11px; font-weight:700; }
.mode-badge.live { color:#ffd2c2; background:rgba(236,106,58,.16); }
.text-button { padding:5px; border:0; color:#8fa39b; background:none; cursor:pointer; }.text-button:hover { color:white; }
.workspace { grid-column:2; min-width:0; }
.topbar { min-height:92px; display:flex; justify-content:space-between; align-items:center; padding:19px 34px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.88); backdrop-filter: blur(14px); }
.topbar h1 { margin:3px 0 0; font-size:23px; letter-spacing:-.02em; }.breadcrumb { margin:0; color:var(--muted); font-size:12px; }
.admin-chip { display:flex; align-items:center; gap:10px; }.admin-chip small,.admin-chip strong { display:block; }.admin-chip small { color:var(--muted); font-size:10px; }.admin-chip strong { margin-top:2px; font-size:13px; }
.topbar-tools { display:flex; align-items:center; gap:18px; }.header-button { padding:7px 11px; border:1px solid var(--line); border-radius:8px; color:#50615a; background:#fff; cursor:pointer; font-size:12px; }.header-button:hover { border-color:#9dafa7; color:var(--green); }
.avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--green); font-size:13px; }
.page { padding:28px 34px 56px; }

.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:22px; }.page-head h2 { margin:0 0 6px; font-size:22px; }.page-head p { margin:0; color:var(--muted); font-size:13px; }
.mode-notice { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding:13px 16px; border:1px solid #c7dfd1; border-radius:12px; color:#245f46; background:#edf8f1; font-size:13px; }
.mode-notice::before { content:"M"; width:24px; height:24px; display:grid; place-items:center; border-radius:7px; color:#fff; background:var(--green); font-size:11px; font-weight:800; }
.grid { display:grid; gap:16px; }.metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.status-grid { grid-template-columns:1.45fr .55fr; margin-top:18px; }
.card { border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); box-shadow:0 2px 4px rgba(20,40,32,.025); }
.card-pad { padding:20px; }.card-head { display:flex; justify-content:space-between; align-items:center; padding:17px 20px; border-bottom:1px solid var(--soft-line); }.card-head h3 { margin:0; font-size:15px; }
.form-card-wide { max-width:900px; }
.subsection-head { padding-left:0; padding-right:0; }.subsection-head-spaced { margin-top:18px; }
.section-title { margin:0 0 14px; font-size:15px; }.section-title-tight { margin-bottom:12px; }
.top-space { margin-top:16px; }.permission-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
.prose { margin:0; line-height:1.7; white-space:pre-wrap; }
.metric { min-height:126px; padding:20px; position:relative; overflow:hidden; }.metric::after { content:""; position:absolute; width:80px; height:80px; right:-28px; top:-28px; border-radius:50%; background:var(--mint); opacity:.55; }
.metric-label { color:var(--muted); font-size:12px; }.metric-value { margin-top:14px; font-family:Georgia,"Songti SC",serif; font-size:30px; line-height:1; }.metric-foot { margin-top:10px; color:#8c979b; font-size:11px; }
.status-row { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--soft-line); }.status-cell { padding:19px; background:#fff; }.status-cell strong { display:block; margin-top:7px; font-size:24px; }.status-cell span { color:var(--muted); font-size:11px; }
.worker { display:flex; flex-direction:column; justify-content:center; min-height:155px; }.worker-state { display:flex; align-items:center; gap:8px; font-weight:700; }.dot { width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px rgba(187,58,58,.09); }.dot.online { background:#36a36c; box-shadow:0 0 0 5px rgba(54,163,108,.11); }
.worker-state-spaced { margin-top:14px; }.worker-heartbeat { margin:12px 0 0; font-size:12px; }
.mode-notice-live { border-color:#f0cabb; color:#8a3e24; background:#fff4ef; }
.reconcile-warning { display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; padding:15px 17px; border:1px solid #e8abab; border-radius:12px; color:#8f2929; background:#fff1f1; font-size:13px; font-weight:700; line-height:1.55; }
.reconcile-warning::before { content:"!"; flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--red); }

.toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin-bottom:16px; padding:15px; border:1px solid var(--line); border-radius:14px; background:#fff; }.toolbar .field { margin:0; min-width:150px; }.toolbar .field.grow { flex:1; }.toolbar-actions { display:flex; gap:8px; margin-left:auto; }
.field { display:grid; gap:7px; margin:17px 0; }.field > span,.field-label { color:#405058; font-size:12px; font-weight:700; }.field small { color:var(--muted); line-height:1.5; }
input,select,textarea { width:100%; min-height:41px; padding:9px 11px; border:1px solid #ccd6d3; border-radius:9px; outline:none; color:var(--ink); background:#fff; transition:.15s; }
input:focus,select:focus,textarea:focus { border-color:#4c8970; box-shadow:0 0 0 3px rgba(76,137,112,.11); } textarea { min-height:96px; resize:vertical; line-height:1.55; }
input[readonly] { color:#66756f; background:#f3f5f4; }.checkbox { display:flex; align-items:center; gap:8px; cursor:pointer; }.checkbox input { width:17px; min-height:17px; accent-color:var(--green); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }.form-grid .span-2 { grid-column:1/-1; }
.button { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 15px; border:1px solid #cbd5d1; border-radius:9px; color:#293832; background:#fff; cursor:pointer; font-size:13px; font-weight:700; transition:.15s ease; }
.button:hover:not(:disabled) { border-color:#9cada6; transform:translateY(-1px); box-shadow:0 3px 10px rgba(30,50,42,.07); }.button:disabled { opacity:.55; cursor:not-allowed; }
.button-primary { border-color:var(--accent); color:#fff; background:var(--accent); }.button-primary:hover:not(:disabled) { border-color:var(--accent-dark); background:var(--accent-dark); }.button-danger { border-color:#edc5c5; color:var(--red); background:#fff8f8; }.button-soft { border-color:#cee0d7; color:var(--green); background:#f1f8f4; }.button-wide { width:100%; min-height:46px; }
.button.loading::before { content:""; width:13px; height:13px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
.form-error { padding:10px 12px; border:1px solid #efc3c3; border-radius:9px; color:#9c2929; background:#fff5f5; font-size:12px; }
.form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; padding-top:18px; border-top:1px solid var(--soft-line); }

.table-card { overflow:hidden; }.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th { padding:11px 15px; color:#728078; background:#f7f9f7; font-size:11px; text-align:left; white-space:nowrap; } td { padding:14px 15px; border-top:1px solid var(--soft-line); font-size:13px; vertical-align:middle; } tbody tr:hover { background:#fbfcfb; }
.cell-main { display:block; color:#24332d; font-weight:700; }.cell-sub { display:block; margin-top:4px; color:#87928d; font-size:11px; font-weight:400; }.mono { font-family:"Cascadia Mono",Consolas,monospace; font-size:12px; }.link { border:0; padding:2px 0; color:var(--blue); background:none; cursor:pointer; font-weight:700; }
.badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; color:#52615b; background:#eef2f0; font-size:10px; font-weight:800; letter-spacing:.03em; }.badge.ACTIVE,.badge.SUCCEEDED,.badge.enabled { color:#23734f; background:#e5f4eb; }.badge.DISABLED,.badge.CANCELLED { color:#6d7773; background:#edf0ef; }.badge.REVOKED,.badge.FAILED { color:#aa3838; background:#faeaea; }.badge.QUEUED,.badge.RESULT_PENDING { color:#916117; background:#fff2d9; }.badge.RUNNING { color:#2765a4; background:#e7f1fb; }.badge.UNKNOWN { color:#9a4e28; background:#fbe9df; }
.empty { padding:58px 24px; text-align:center; }.empty-mark { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 14px; border-radius:14px; color:#6d8178; background:#edf2ef; font-size:22px; }.empty h3 { margin:0 0 7px; font-size:15px; }.empty p { margin:0; color:var(--muted); font-size:12px; }
.pagination { display:flex; justify-content:space-between; align-items:center; padding:13px 15px; border-top:1px solid var(--soft-line); }.pagination span { color:var(--muted); font-size:11px; }.pagination div { display:flex; gap:8px; }

.detail-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr); gap:18px; }.definition { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }.definition > div { padding:13px 0; border-bottom:1px solid var(--soft-line); }.definition dt { color:var(--muted); font-size:11px; }.definition dd { margin:5px 0 0; font-size:13px; word-break:break-word; }.balance-panel { color:#fff; background:linear-gradient(145deg,#173a30,#234d3e); border:0; }.balance-panel .muted { color:#b2c8c0; }.balance-big { margin:9px 0 23px; font-family:Georgia,serif; font-size:38px; }.balance-pair { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.balance-pair div { padding-top:13px; border-top:1px solid rgba(255,255,255,.15); }.balance-pair strong,.balance-pair span { display:block; }.balance-pair span { color:#a9c2b8; font-size:10px; }.balance-pair strong { margin-top:5px; font-size:16px; }
.action-stack { display:grid; gap:9px; }.action-stack .button { justify-content:flex-start; }.danger-zone { margin-top:16px; padding-top:16px; border-top:1px solid #f0dddd; }
.slot-row,.variant-row { display:grid; align-items:end; gap:9px; margin:9px 0; padding:11px; border:1px solid var(--line); border-radius:10px; background:#fafcfa; }.slot-row { grid-template-columns:1fr 1.3fr auto auto; }.variant-row { grid-template-columns:.8fr .8fr 1fr 1fr 1fr auto; }.slot-row .field,.variant-row .field { margin:0; }.icon-button { width:36px; height:40px; border:1px solid #dfcaca; border-radius:8px; color:var(--red); background:#fff; cursor:pointer; }
.preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.preview { aspect-ratio:1/1; overflow:hidden; position:relative; border:1px solid var(--line); border-radius:10px; background:#eef2ef; }.preview img { width:100%; height:100%; object-fit:cover; }.preview span { position:absolute; left:7px; bottom:7px; padding:3px 6px; border-radius:6px; color:#fff; background:rgba(0,0,0,.58); font-size:10px; }
.hint { padding:11px 13px; border-radius:9px; color:#5f6c67; background:#f1f5f3; font-size:12px; line-height:1.55; }.hint.warning { color:#875920; background:#fff5e3; }.hint.danger { color:#963333; background:#fff0f0; }

.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:30px; background:rgba(9,25,19,.52); backdrop-filter:blur(3px); }.modal { width:min(620px,calc(100vw - 70px)); max-height:calc(100vh - 60px); overflow:auto; border-radius:18px; background:#fff; box-shadow:0 25px 80px rgba(0,0,0,.25); }.modal.wide { width:min(900px,calc(100vw - 70px)); }.modal-head { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; padding:21px 24px 17px; border-bottom:1px solid var(--soft-line); background:#fff; }.modal-head h2 { margin:0; font-size:19px; }.modal-head p { margin:5px 0 0; color:var(--muted); font-size:12px; }.modal-body { padding:4px 24px 24px; }.modal-close { width:34px; height:34px; border:0; border-radius:9px; color:#66746f; background:#f1f4f2; cursor:pointer; font-size:18px; }
.secret-box { margin:18px 0; padding:18px; border:1px solid #bad8c8; border-radius:12px; background:#f0faf4; }.secret-value { display:block; margin:12px 0; padding:13px; border-radius:8px; color:#173b2e; background:#dcefe5; font-family:"Cascadia Mono",Consolas,monospace; font-size:13px; word-break:break-all; user-select:all; }
.toast-region { position:fixed; right:24px; top:20px; z-index:80; display:grid; gap:9px; }.toast { min-width:280px; max-width:420px; padding:13px 15px; border:1px solid #cbdad3; border-radius:11px; color:#244136; background:#f5fff8; box-shadow:var(--shadow); font-size:13px; animation:toast-in .2s ease; }.toast.error { border-color:#ecc3c3; color:#8e3030; background:#fff6f6; }.toast.warning { border-color:#ead4a9; color:#7d591b; background:#fffaf0; }
@keyframes toast-in { from { opacity:0; transform:translateY(-8px); } }

@media (max-width: 1260px) { .metric-grid { grid-template-columns:repeat(3,1fr); }.page { padding-left:26px; padding-right:26px; }.topbar { padding-left:26px; padding-right:26px; } }

.catalog-summary { display:grid; gap:5px; min-width:200px; overflow-wrap:anywhere; }
.catalog-summary[hidden] { display:none; }
.inline-sort { display:flex; gap:6px; align-items:center; }
.sort-input { width:80px; min-width:80px; }
.allowed-capabilities { display:block; width:180px; min-width:180px; max-width:180px; white-space:normal; overflow-wrap:anywhere; }
.allowed-capabilities > div { margin-bottom:4px; }
.log-json { white-space:pre-wrap; overflow-wrap:anywhere; max-height:65vh; overflow:auto; font-size:13px; }
.mapping-choice { display:grid; grid-template-columns:minmax(0,1fr) 130px; gap:16px; align-items:center; padding:12px 14px; margin:8px 0; border:1px solid var(--line); border-radius:10px; background:#fafcfa; }
.mapping-choice .field { margin:0; }
@media (max-width:600px) { .mapping-choice { grid-template-columns:minmax(0,1fr) 100px; gap:8px; } }