:root {
  --bg: #f3f5f4;
  --surface: #ffffff;
  --surface-2: #f8faf9;
  --ink: #17201d;
  --muted: #69756f;
  --line: #dfe5e2;
  --sidebar: #151b19;
  --sidebar-2: #202925;
  --green: #16845b;
  --green-dark: #0f6847;
  --green-soft: #e7f5ef;
  --amber: #b7791f;
  --amber-soft: #fff4db;
  --red: #c23d3d;
  --red-soft: #ffeded;
  --blue: #2563a8;
  --blue-soft: #eaf2fb;
  --shadow: 0 14px 35px rgba(23, 32, 29, .08);
  --sidebar-width: 248px;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #e9eeeb; }
.login-shell { width: min(920px, 100%); min-height: 570px; display: grid; grid-template-columns: .92fr 1.08fr; overflow: hidden; border: 1px solid #d8dfdb; border-radius: 8px; background: var(--surface); box-shadow: 0 28px 70px rgba(15, 34, 26, .16); }
.login-brand { position: relative; color: white; background: #18211e; overflow: hidden; }
.login-brand::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 34px 34px; }
.login-brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 62px; height: 1px; background: #34443e; box-shadow: 0 -80px #29352f, 0 -160px #24302b; transform: skewY(-9deg); }
.login-brand-inner { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 52px; }
.login-brand img { border-radius: 7px; margin-bottom: 28px; box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.brand-kicker, .eyebrow, .page-heading p, .nav-label { margin: 0; color: #7cc8a8; font-size: 11px; font-weight: 800; letter-spacing: 0; }
.login-brand h1 { margin: 12px 0 28px; font-size: clamp(34px, 5vw, 48px); line-height: 1.15; letter-spacing: 0; }
.login-signal { display: inline-flex; align-items: center; gap: 9px; color: #b7c7c0; font-size: 13px; }
.login-signal span, .service-pill span { width: 8px; height: 8px; border-radius: 50%; background: #28bd7d; box-shadow: 0 0 0 5px rgba(40,189,125,.12); }
.login-form-wrap { display: grid; place-items: center; padding: 54px; }
.login-form { width: min(340px, 100%); }
.login-heading { margin-bottom: 30px; }
.login-heading h2 { margin: 7px 0 0; font-size: 27px; letter-spacing: 0; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field > span { color: #53605a; font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea, .input { width: 100%; min-height: 42px; border: 1px solid #ccd5d0; border-radius: 6px; background: white; color: var(--ink); padding: 10px 12px; outline: none; transition: border .16s, box-shadow .16s; }
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(22,132,91,.12); }
.btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 6px; padding: 8px 14px; font-weight: 750; font-size: 13px; }
.btn svg, .icon-btn svg { width: 17px; height: 17px; }
.btn-primary { color: white; background: var(--green); }
.btn-primary:hover { background: var(--green-dark); }
.btn-ghost { color: #49554f; background: white; border-color: #ccd5d0; }
.btn-ghost:hover { background: #f5f7f6; }
.btn-danger { color: var(--red); background: var(--red-soft); border-color: #f5caca; }
.btn-login { width: 100%; min-height: 46px; margin-top: 7px; }
.login-foot { margin: 20px 0 0; text-align: center; color: #8a948f; font-size: 12px; }
.alert { padding: 11px 12px; border-radius: 6px; margin: -12px 0 18px; font-size: 13px; }
.alert-error { color: #8d2929; border: 1px solid #f1c1c1; background: var(--red-soft); }
.panel-page { min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; background: var(--sidebar); color: #dbe4e0; border-right: 1px solid #2b3531; }
.brand-lockup { height: 75px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid #2b3531; }
.brand-lockup img { border-radius: 6px; }
.brand-lockup div { display: grid; gap: 1px; }
.brand-lockup strong { color: white; font-size: 15px; }
.brand-lockup span { color: #8fa199; font-size: 11px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 10px; }
.nav-label { color: #62756d; padding: 13px 11px 7px; }
.nav-item { width: 100%; height: 40px; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 5px; padding: 0 11px; margin: 2px 0; color: #aab9b3; background: transparent; text-align: left; font-size: 13px; font-weight: 650; }
.nav-item svg { width: 17px; height: 17px; }
.nav-item:hover { color: white; background: #202925; }
.nav-item.active { color: white; background: #26342e; box-shadow: inset 3px 0 var(--green); }
.sidebar-user { min-height: 72px; display: flex; align-items: center; gap: 10px; border-top: 1px solid #2b3531; padding: 12px 14px; }
.avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; color: #d8f4e7; background: #29463a; font-weight: 800; }
.sidebar-user > div:nth-child(2) { min-width: 0; flex: 1; display: grid; }
.sidebar-user strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.sidebar-user span { color: #768981; font-size: 10px; }
.icon-btn { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 5px; color: #738079; background: transparent; }
.icon-btn:hover { color: var(--ink); background: #eef2f0; border-color: #dce3df; }
.sidebar .icon-btn:hover { color: white; background: #27332e; border-color: #34443e; }
.workspace { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; z-index: 20; top: 0; height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.page-heading p { color: #84918b; }
.page-heading h1 { margin: 3px 0 0; font-size: 20px; letter-spacing: 0; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.service-pill { height: 34px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fafcfb; color: #59665f; font-size: 12px; }
.service-pill.offline span { background: #c24b4b; box-shadow: 0 0 0 5px rgba(194,75,75,.1); }
.content { width: min(1500px, 100%); padding: 24px 28px 40px; }
.mobile-menu { display: none; }
.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--surface); }
.metric { min-height: 118px; padding: 20px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 700; }
.metric-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: var(--green-soft); color: var(--green); }
.metric-icon.amber { background: var(--amber-soft); color: var(--amber); }
.metric-icon.blue { background: var(--blue-soft); color: var(--blue); }
.metric-icon.red { background: var(--red-soft); color: var(--red); }
.metric-icon svg { width: 16px; height: 16px; }
.metric strong { display: block; margin-top: 14px; font-size: 27px; letter-spacing: 0; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.75fr); gap: 18px; margin-top: 18px; }
.panel { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); overflow: hidden; }
.panel-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font-size: 14px; letter-spacing: 0; }
.panel-header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.toolbar .search { position: relative; width: min(320px, 100%); }
.toolbar .search svg { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; color: #8a9690; }
.toolbar .search input { padding-left: 35px; }
.toolbar .spacer { flex: 1; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { height: 42px; padding: 0 14px; color: #748079; background: #f7f9f8; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; font-size: 11px; }
.data-table td { height: 49px; padding: 8px 14px; border-bottom: 1px solid #edf1ef; color: #35413b; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fafcfb; }
.cell-main { display: grid; gap: 2px; min-width: 130px; }
.cell-main strong { color: var(--ink); font-size: 12px; }
.cell-main span, .muted { color: var(--muted); font-size: 11px; }
.mono { font-family: Consolas, "SFMono-Regular", monospace; font-size: 11px; }
.badge { display: inline-flex; align-items: center; min-height: 23px; border-radius: 4px; padding: 3px 7px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.badge.green { color: #126442; background: var(--green-soft); }
.badge.amber { color: #8e5b12; background: var(--amber-soft); }
.badge.red { color: #9e3030; background: var(--red-soft); }
.badge.blue { color: #245c93; background: var(--blue-soft); }
.badge.gray { color: #5f6964; background: #edf0ef; }
.row-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.row-actions .icon-btn { width: 31px; height: 31px; }
.empty { min-height: 260px; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 34px; }
.empty svg { width: 32px; height: 32px; margin-bottom: 8px; color: #a3aea8; }
.empty strong { display: block; color: #56625c; font-size: 13px; }
.empty p { margin: 4px 0 0; font-size: 11px; }
.status-list { padding: 6px 16px; }
.status-row { min-height: 52px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #edf1ef; }
.status-row:last-child { border-bottom: 0; }
.status-mark { width: 9px; height: 9px; border-radius: 50%; background: #a9b2ae; }
.status-mark.online { background: #25a86f; box-shadow: 0 0 0 4px #e6f5ef; }
.status-mark.warn { background: #d79a35; box-shadow: 0 0 0 4px #fff4dc; }
.status-row div { display: grid; flex: 1; }
.status-row strong { font-size: 12px; }
.status-row span { color: var(--muted); font-size: 10px; }
.terminal { min-height: 430px; display: grid; grid-template-rows: 1fr auto; background: #121816; color: #d4e1dc; border-radius: 7px; overflow: hidden; border: 1px solid #2d3934; }
.terminal-output { min-height: 330px; max-height: 520px; overflow: auto; padding: 18px; font: 12px/1.65 Consolas, monospace; white-space: pre-wrap; }
.terminal-line { margin-bottom: 10px; color: #aab9b3; }
.terminal-line .prompt { color: #55d59d; }
.terminal-line.error { color: #f28b82; }
.terminal-input { display: flex; align-items: center; gap: 10px; border-top: 1px solid #2b3732; padding: 11px 13px; background: #18201d; }
.terminal-input span { color: #55d59d; font: 700 14px Consolas, monospace; }
.terminal-input input { flex: 1; border: 0; outline: 0; background: transparent; color: white; font: 13px Consolas, monospace; }
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
.settings-menu { border-right: 1px solid var(--line); padding: 12px; }
.settings-tab { width: 100%; min-height: 38px; border: 0; border-radius: 5px; padding: 0 10px; text-align: left; color: #66736c; background: transparent; font-size: 12px; font-weight: 700; }
.settings-tab.active { color: var(--green); background: var(--green-soft); }
.settings-content { padding: 20px 24px 26px 6px; }
.settings-section { display: none; }
.settings-section.active { display: block; }
.settings-section h2 { margin: 0 0 4px; font-size: 16px; }
.settings-section > p { margin: 0 0 22px; color: var(--muted); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.toggle-row { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #edf1ef; }
.toggle-row div { display: grid; gap: 3px; }
.toggle-row strong { font-size: 12px; }
.toggle-row span { color: var(--muted); font-size: 10px; }
.switch { position: relative; width: 38px; height: 22px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; }
.switch i { position: absolute; inset: 0; border-radius: 11px; background: #c9d0cd; transition: .18s; }
.switch i::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: .18s; }
.switch input:checked + i { background: var(--green); }
.switch input:checked + i::after { transform: translateX(16px); }
.segmented { display: inline-flex; min-height: 38px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: white; }
.segment { min-width: 102px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-right: 1px solid var(--line); padding: 7px 11px; color: #66736c; background: white; font-size: 12px; font-weight: 700; }
.segment:last-child { border-right: 0; }
.segment:hover { background: #f6f9f7; }
.segment.active { color: var(--green); background: var(--green-soft); }
.segment svg { width: 15px; height: 15px; }
.segment b { min-width: 20px; padding: 2px 5px; border-radius: 4px; background: #edf1ef; color: #65716b; font-size: 10px; }
.data-source { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.data-source svg { width: 15px; height: 15px; }
.entity-details { min-width: 260px; max-width: 540px; color: var(--muted); line-height: 1.5; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.feature-band { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); overflow: hidden; }
.feature-band > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f8faf9; }
.feature-band > header strong { font-size: 13px; }
.feature-band > header span { color: var(--muted); font-size: 10px; }
.feature-list { padding: 0 14px; }
.feature-list .toggle-row:last-child { border-bottom: 0; }
.feature-actions { display: flex !important; grid-auto-flow: column; align-items: center; gap: 8px !important; }
.feature-actions .icon-btn { width: 30px; height: 30px; }
.config-editor { min-height: 260px; line-height: 1.55; }
.feature-config-panel { margin-bottom: 18px; }
.feature-config-fields { padding: 18px; }
.feature-config-panel + .panel, .feature-config-panel ~ .panel { margin-top: 18px; }
.panel-footer { display: flex; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--line); }
.schema-toggle { min-height: 54px; padding: 8px 0; }
.row-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn.approve { color: var(--green); }
.icon-btn.approve:hover { background: var(--green-soft); border-color: #bed9ca; }
.automation-layout { display: grid; gap: 18px; }
.icon-btn.danger { color: var(--red); }
.icon-btn.danger:hover { background: var(--red-soft); border-color: #f5caca; }
.modal { width: min(650px, calc(100vw - 28px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid #cfd8d3; border-radius: 8px; box-shadow: 0 30px 90px rgba(13,25,20,.28); }
.modal::backdrop { background: rgba(13,20,17,.56); backdrop-filter: blur(2px); }
.modal form > header, .modal form > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; }
.modal form > header { border-bottom: 1px solid var(--line); }
.modal form > footer { border-top: 1px solid var(--line); justify-content: flex-end; }
.modal h2 { margin: 3px 0 0; font-size: 17px; }
.modal-body { max-height: calc(100vh - 190px); overflow-y: auto; padding: 20px 18px 4px; }
.toast-stack { position: fixed; z-index: 80; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { width: min(360px, calc(100vw - 40px)); display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: white; background: #1b2521; border-radius: 6px; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .2s ease-out; }
.toast.error { background: #8f3030; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
.loading { min-height: 360px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.spinner { width: 24px; height: 24px; border: 2px solid #dbe3df; border-top-color: var(--green); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mobile-overlay { display: none; }
@media (max-width: 1050px) {
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .login-page { padding: 0; background: white; }
  .login-shell { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
  .login-brand { min-height: 220px; }
  .login-brand-inner { padding: 30px; }
  .login-brand img { width: 48px; height: 48px; margin-bottom: 14px; }
  .login-brand h1 { margin: 8px 0 12px; font-size: 30px; }
  .login-form-wrap { padding: 36px 28px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .mobile-overlay.visible { display: block; position: fixed; z-index: 25; inset: 0; background: rgba(10,17,14,.45); }
  .workspace { margin-left: 0; }
  .topbar { height: 66px; padding: 0 14px; gap: 10px; }
  .mobile-menu { display: inline-grid; }
  .page-heading { flex: 1; }
  .page-heading h1 { font-size: 17px; }
  .service-pill { display: none; }
  .content { padding: 16px 14px 30px; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 104px; padding: 15px; }
  .metric strong { font-size: 22px; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-menu { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-menu { scrollbar-width: none; }
  .settings-menu::-webkit-scrollbar { display: none; }
  .settings-tab { width: auto; flex: 0 0 auto; }
  .settings-content { padding: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .toolbar .search { order: 3; width: 100%; }
  .segmented { width: 100%; overflow-x: auto; }
  .segment { flex: 1 0 92px; min-width: 92px; }
  .feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .metric-strip { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: 0; }
  .metric:nth-child(3) { border-bottom: 1px solid var(--line); }
}
.input-action{display:flex;gap:8px;align-items:center}.input-action input{flex:1;min-width:0}.input-action .btn{flex:0 0 auto;white-space:nowrap}