:root {
  font-family:'Segoe UI','Microsoft YaHei',sans-serif;
  color:#29463d;
  background:#f5f7f3;
  font-synthesis:none;
  --green:#357b63;
  --muted:#819087;
  --line:#e5ebe4}

* {
  box-sizing:border-box}
body {
  margin:0}
button,input,select {
  font:inherit}
button {
  cursor:pointer}
button:disabled {
  opacity:.55;
  cursor:wait}
button,a,input,select {
  outline-offset:4px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid #429879}
button {
  border:0;
  border-radius:10px;
  padding:11px 17px;
  font-size:13px;
  font-weight:600}
h1,h2,h3,p {
  margin:0}
h1 {
  font-size:30px;
  letter-spacing:-1px}
h2 {
  font-size:18px}
h3 {
  font-size:16px}
p {
  font-size:13px;
  color:#7b8b80;
  line-height:1.8}
.primary {
  background:var(--green);
  color:white}
.primary:hover {
  background:#28674f}
.secondary {
  background:#f5f7f2;
  border:1px solid #dfe7dc;
  color:#587361}
.link,.quiet {
  background:transparent;
  color:#47816a;
  padding:7px}
.eyebrow {
  color:#8c9b8e;
  font-size:11px;
  letter-spacing:1px}
.brand-mark {
  display:grid;
  place-items:center;
  background:#dfece0;
  color:#5c9574;
  border-radius:14px;
  font-size:28px;
  width:48px;
  height:48px}
.initial {
  padding:50px}
.login-layout {
  max-width:1100px;
  min-height:100vh;
  margin:auto;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:90px;
  align-items:center;
  padding:60px}
.login-intro .eyebrow {
  margin:26px 0 18px}
.login-intro h1 {
  font-size:42px;
  line-height:1.45;
  color:#315c49}
.login-intro>p {
  margin-top:22px;
  font-size:15px}
.intro-lines {
  display:grid;
  gap:14px;
  margin-top:40px;
  font-size:12px;
  color:#6e8c76}
.login-card {
  padding:36px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 16px 50px #385a3d08}
.login-card h2 {
  font-size:24px;
  margin:10px 0}
.login-card form {
  margin-top:27px}
.login-card .primary {
  width:100%;
  display:flex;
  justify-content:space-between;
  margin-top:25px}
label {
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#566e60;
  font-size:12px;
  margin-top:19px}
input,select {
  width:100%;
  min-width:0;
  padding:11px 12px;
  border:1px solid #dfe6dd;
  border-radius:9px;
  background:#fbfcf9;
  color:#314e3e;
  font-size:13px}
input:focus,select:focus {
  border-color:#7caa8b}
input:disabled {
  color:#8b968d;
  background:#f0f2ee}
.form-note {
  font-size:11px;
  line-height:1.8;
  margin-top:20px;
  color:#95a08d}
.auth-switch {
  margin-top:15px;
  text-align:center}
.default-channel {
  padding:24px;
  margin-bottom:24px}
.default-channel form {
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:12px}
.default-channel label {
  flex:1;
  min-width:180px}
.default-channel button {
  min-height:40px}
.login-card>.secondary {
  margin-top:20px}
.notice {
  padding:12px 15px;
  background:#eaf4e9;
  border:1px solid #d4e7d1;
  border-radius:10px;
  color:#4e7b4c;
  margin:15px 0;
  overflow-wrap:anywhere}
.notice.error {
  background:#fbf0e8;
  color:#a06445;
  border-color:#f0dccf}
.workspace {
  display:grid;
  grid-template-columns:224px 1fr;
  min-height:100vh}
aside {
  position:sticky;
  top:0;
  height:100vh;
  background:#fcfdf9;
  border-right:1px solid var(--line);
  padding:32px 20px;
  display:flex;
  flex-direction:column}
.brand {
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:11px;
  color:#345e48;
  font-size:23px;
  font-weight:650}
.brand span:not(.brand-mark) {
  display:block;
  font-size:10px;
  font-weight:400;
  color:#93a08d;
  margin-top:3px;
  letter-spacing:2px}
.nav-label {
  font-size:10px;
  color:#a2ad9b;
  margin:50px 13px 14px}
nav {
  display:grid;
  gap:8px}
nav button {
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px;
  text-align:left;
  color:#82927a;
  background:transparent;
  font-weight:500}
nav button>span {
  width:22px;
  font-size:20px}
nav button.selected {
  color:#49724c;
  background:#eaf1e4;
  font-weight:600}
.sidebar-bottom {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:12px}
.avatar {
  background:#e9e1ef;
  color:#987ca5;
  border-radius:50%;
  width:32px;
  height:32px;
  display:grid;
  place-items:center}
.sidebar-bottom small {
  display:block;
  color:#99a38e;
  margin-top:4px;
  font-size:10px}
.sidebar-bottom button {
  margin-left:auto;
  font-size:11px}
.main {
  min-width:0;
  padding:37px 48px 24px;
  max-width:1500px;
  width:100%;
  margin:0 auto}
.main header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
  gap:18px}
.main header h1 {
  margin:9px 0}
.main footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:30px;
  color:#a5af9b;
  font-size:10px}
.welcome {
  position:relative;
  padding:28px 32px;
  background:#e6efe1;
  border:1px solid #dce8d7;
  border-radius:18px;
  overflow:hidden}
.welcome h2 {
  font-size:24px;
  margin:10px 0}
.welcome .eyebrow {
  color:#809573}
.welcome p {
  max-width:75%;
  color:#809274}
.welcome-art {
  position:absolute;
  right:32px;
  top:20px;
  color:#c5d9ba;
  font-size:140px;
  line-height:1;
  pointer-events:none}
.light-button {
  margin-top:20px;
  background:#f8fbf3;
  color:#59804d;
  font-size:12px}
.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin:24px 0}
.stats article {
  padding:22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px}
.stats span {
  font-size:12px;
  color:#8b9983}
.stats strong {
  display:block;
  font-size:29px;
  font-weight:550;
  margin-top:12px;
  font-variant-numeric:tabular-nums;
  color:#45694e}
.surface {
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:20px}
.surface .section-heading {
  padding:23px 25px 0}
.section-heading h2 {
  font-weight:600}
.section-heading h2 small {
  font-size:11px;
  margin-left:6px;
  color:#87a074;
  background:#edf3e8;
  padding:3px 7px;
  border-radius:5px}
.section-heading p {
  margin-top:6px;
  font-size:11px}
.badge {
  display:inline-flex;
  white-space:nowrap;
  padding:5px 9px;
  background:#edf5e8;
  color:#6f975b;
  border-radius:6px;
  font-size:10px}
.badge.muted {
  background:#f0f1ed;
  color:#a1a78f}
.badge.failed {
  background:#faeee6;
  color:#ad7a58}
.table-wrap {
  overflow:auto}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  white-space:nowrap;
  font-size:12px}
th {
  background:#fafbf7;
  padding:13px 23px;
  color:#95a08a;
  font-size:10px;
  font-weight:500}
td {
  padding:17px 23px;
  border-top:1px solid #f0f2eb;
  color:#6c7e61}
td strong {
  color:#526b45;
  font-size:12px;
  font-weight:600}
td small {
  display:block;
  margin-top:5px;
  color:#a0ab92;
  font-size:10px}
.empty {
  text-align:center;
  padding:55px 25px;
  color:#b7c6a7;
  grid-column:1/-1}
.empty>span {
  font-size:36px}
.empty h3 {
  color:#6e885a;
  margin:16px 0 8px}
.empty p {
  font-size:12px}
.channel-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px}
.channel-card {
  background:#fff;
  border:1px solid var(--line);
  padding:24px;
  border-radius:16px;
  min-width:0}
.channel-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px}
.channel-icon {
  background:#efe8f5;
  border-radius:12px;
  font-size:25px;
  color:#a28bb3;
  width:43px;
  height:43px;
  display:grid;
  place-items:center}
.channel-card h2 {
  font-size:17px;
  color:#526b48}
.model-name {
  margin-top:8px;
  font-size:12px;
  color:#7d916c;
  overflow-wrap:anywhere}
.channel-url {
  margin-top:18px;
  font-size:11px;
  color:#a0ac92;
  overflow-wrap:anywhere;
  padding:10px;
  background:#f8faf4;
  border-radius:7px}
.key-note {
  margin:14px 0 20px;
  font-size:10px;
  color:#98a68b}
.card-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:16px;
  gap:6px}
.card-actions button {
  font-size:11px;
  padding:8px}
.account-settings {
  max-width:520px;
  padding:28px}
.account-settings>p {
  margin-top:8px}
.account-settings button {
  margin-top:24px}
dialog {
  width:480px;
  max-width:calc(100vw - 32px);
  max-height:90vh;
  padding:28px;
  border:1px solid #e1e8db;
  border-radius:18px;
  color:#365e42;
  box-shadow:0 25px 100px #18391d2b}
dialog::backdrop {
  background:#1d352d55;
  backdrop-filter:blur(3px)}
.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px}
.dialog-heading p {
  font-size:11px;
  margin-top:7px}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px}
.check {
  flex-direction:row;
  align-items:center;
  gap:8px}
.check input {
  width:15px;
  height:15px;
  accent-color:#52875f}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:25px}

@media(max-width:1150px) {
  .channel-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.main {
  padding:28px}
.workspace {
  grid-template-columns:200px 1fr}
.welcome-art {
  opacity:.6}
}
@media(max-width:760px) {
  .login-layout {
  grid-template-columns:1fr;
  padding:24px;
  gap:30px}
.login-intro {
  display:none}
.workspace {
  grid-template-columns:1fr}
aside {
  position:relative;
  height:auto;
  padding:18px}
.brand {
  font-size:19px}
.brand-mark {
  width:36px;
  height:36px}
.nav-label,.sidebar-bottom {
  display:none}
nav {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:15px}
nav button {
  padding:9px;
  font-size:12px}
nav button>span {
  display:none}
.main {
  padding:20px 15px}
.main header h1 {
  font-size:25px}
.stats {
  grid-template-columns:repeat(2,1fr);
  gap:10px}
.channel-grid {
  grid-template-columns:1fr}
.main footer {
  flex-direction:column}
.welcome {
  padding:24px}
.welcome h2 {
  font-size:20px}
.welcome-art {
  display:none}
.welcome p {
  max-width:100%}
.section-heading {
  flex-wrap:wrap}
.section-heading .primary {
  font-size:12px}
}