:root { color-scheme: light; font: 14px/1.55 "Segoe UI","Microsoft YaHei",system-ui,sans-serif; color: #203c37; background: #f4f6f4; --accent: #176b54; --line: #e0e8e2; --muted: #6f817b; }
* { box-sizing: border-box; }body { margin: 0; }button,input,select,textarea { font: inherit; }a { color: var(--accent); }h1,h2,h3,p { margin: 0; }h1 { font-size: 29px; letter-spacing: -.7px; }h2 { font-size: 21px; }h3 { font-size: 15px; }p { color: var(--muted); }button { cursor: pointer; }[hidden] { display: none !important; }
.console { min-height: 100vh; display: grid; grid-template-columns: 224px minmax(0,1fr); }.sidebar { display: grid; grid-template-rows: auto auto 1fr auto; align-items: start; gap: 22px; padding: 30px 18px 20px; background: #fff; border-right: 1px solid var(--line); }.brand { display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; text-decoration: none; color: #153c30; font-size: 22px; font-weight: 700; padding: 0 8px; }.brand-mark,.login-icon { display: grid; place-items: center; background: var(--accent); color: #fff; border-radius: 11px; width: 38px; height: 38px; font-size: 26px; }.brand small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); letter-spacing: 1px; }.sidebar-caption { color: #9aa59f; padding: 14px 14px 0; font-size: 11px; letter-spacing: 2px; }nav { display: grid; gap: 5px; }nav button { display: grid; grid-template-columns: 20px 1fr; gap: 12px; text-align: left; padding: 12px 14px; background: transparent; color: #63756b; border: 0; border-radius: 8px; }nav button[aria-current="page"] { color: #176b54; background: #e8f3ec; font-weight: 600; }.nav-symbol { font-family: monospace; color: #75988a; font-size: 16px; }.sidebar-footer { display: flex; align-items: center; gap: 7px; padding: 16px 10px 0; border-top: 1px solid var(--line); font-size: 11px; color: #829087; }.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ea66e; }.version { margin-left: auto; }
.main-area { min-width: 0; padding: 35px 36px 20px; }header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; }.eyebrow { color: #668577; font-size: 10px; letter-spacing: 2px; margin-bottom: 10px; }.header-description { margin-top: 7px; font-size: 12px; }.identity { display: flex; align-items: center; gap: 6px; font-size: 12px; }.identity button { font-size: 11px; padding: 6px 9px; }.card { background: white; border: 1px solid var(--line); border-radius: 13px; padding: 26px; }.workspace-card { min-height: 380px; }.login { max-width: 430px; margin: 55px auto 70px; padding: 35px; box-shadow: 0 14px 50px #214b3410; }.login-icon { margin-bottom: 22px; }.login p { margin-top: 7px; }.login form { margin-top: 26px; }.login-footnote { font-size: 11px; text-align: center; padding-top: 18px; }
.section-head { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 20px; margin-bottom: 24px; }.section-kicker { font-size: 10px; letter-spacing: 1.5px; margin-bottom: 4px; color: #98a79e; }#section-note { margin-top: 8px; max-width: 700px; font-size: 12px; }.actions { display: flex; gap: 6px; flex-wrap: wrap; }.actions button,.actions a { font-size: 12px; padding: 7px 10px; }button { background: var(--accent); color: white; border: 1px solid transparent; border-radius: 7px; padding: 10px 14px; transition: background .15s; }button:hover { filter: brightness(.96); }button:disabled { opacity: .5; cursor: wait; }.secondary { background: #f0f4f0; color: #446153; border-color: #e2e9e3; }.danger { color: #a74535; background: #fff4ee; }.toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }.toolbar:empty { display: none; }.toolbar input,.toolbar select { max-width: 240px; }
.table-wrap { overflow-x: auto; border: 1px solid #e8eee9; border-radius: 8px; }table { border-collapse: collapse; width: 100%; text-align: left; }th,td { padding: 13px 12px; border-bottom: 1px solid #eef2ee; white-space: nowrap; }th { font-weight: 500; background: #f8faf8; color: #7b8b81; font-size: 11px; }td { font-size: 12px; }tbody tr:last-child td { border-bottom: 0; }tbody tr:hover { background: #fbfdfb; }td .actions { min-width: 245px; }td .actions button { padding: 5px 8px; font-size: 11px; }.table-wrap + .table-wrap { margin-top: 24px; }.empty { display: grid; place-items: center; min-height: 220px; color: #9aa69d; background: #fbfcfa; border: 1px dashed #dce6de; border-radius: 8px; }.metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 14px; margin-bottom: 25px; }.metric { background: #f6f9f5; padding: 20px; border: 1px solid #e7eee4; border-radius: 10px; color: #718273; font-size: 12px; }.metric strong { display: block; color: #254d37; font-size: 28px; letter-spacing: -1px; font-weight: 600; margin-top: 9px; }.metric small { display: block; margin-top: 5px; font-size: 10px; }.chart { display: grid; gap: 11px; margin: 20px 0 28px; }.chart-row { display: grid; grid-template-columns: 95px minmax(0,1fr) 80px; gap: 15px; align-items: center; font-size: 12px; }meter { width: 100%; height: 16px; }meter::-webkit-meter-bar { background: #eff4ee; border: 0; }meter::-webkit-meter-optimum-value { background: #579472; border-radius: 3px; }.subheading { margin: 24px 0 12px; }.badge { border-radius: 5px; font-size: 10px; padding: 3px 7px; background: #eaf4ec; color: #41805a; }.badge.muted { background: #f4eee9; color: #9f7860; }
form { display: grid; gap: 16px; }label { display: grid; gap: 6px; font-size: 12px; color: #587064; }input,select,textarea { border: 1px solid #d5e1d6; width: 100%; background: white; color: #203c37; border-radius: 6px; padding: 10px 11px; }textarea { min-height: 170px; resize: vertical; }dialog { width: min(760px,94vw); max-height: 90vh; border: 1px solid #d5e3d7; border-radius: 13px; padding: 28px; box-shadow: 0 30px 90px #0a261733; }dialog::backdrop { background: #18362a66; }.dialog-header p { margin-top: 6px; font-size: 12px; }#fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }#fields .wide { grid-column: 1/-1; }#fields h3 { grid-column: 1/-1; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding-top: 18px; }#editor-error { color: #ab4536; font-size: 12px; }#message { min-height: 23px; margin: 20px 0 14px; color: #337954; font-size: 12px; }#message[data-error="true"] { color: #ad4437; }pre { white-space: pre-wrap; overflow-wrap: anywhere; }.page-footer { display: flex; justify-content: space-between; margin-top: 30px; font-size: 10px; color: #a0ada3; }:focus-visible { outline: 3px solid #d69b44; outline-offset: 3px; }
@media(min-width:1600px){.main-area{padding:45px 55px;}.workspace-card{padding:32px;}}
@media(max-width:1000px){.console{grid-template-columns:185px minmax(0,1fr)}.sidebar{padding:25px 12px}.main-area{padding:25px 20px}.section-head,header{grid-template-columns:1fr}.identity{justify-content:flex-start}.section-head .actions{justify-content:flex-start;}}
@media(max-width:680px){.console{grid-template-columns:1fr}.sidebar{grid-template-rows:auto auto;gap:15px;padding:18px;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:19px}.brand small,.sidebar-caption,.sidebar-footer{display:none}nav{display:flex;flex-wrap:wrap;gap:5px}nav button{padding:7px 9px;display:block;font-size:12px}.nav-symbol{display:none}.main-area{padding:23px 15px}.card{padding:20px 16px}h1{font-size:24px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric{padding:15px}.metric strong{font-size:24px}#fields{grid-template-columns:1fr}dialog{padding:20px}.page-footer span{display:none}.chart-row{grid-template-columns:75px minmax(0,1fr) 60px;gap:8px;font-size:10px}.login{margin:25px auto}.section-head{gap:14px}}