:root {
  --navy:#10231e;
  --ink:#182c27;
  --muted:#7c8b85;
  --green:#167c60;
  --mint:#edf6f0;
  --line:#e4ebe6;
  --paper:#f6f8f5;
  --white:#fff;
  --red:#bf4b49;
  --gold:#af7d23
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  outline-color:var(--green)
}
button {
  cursor:pointer;
  border:0;
  background:transparent;
  color:inherit
}
button:disabled {
  opacity:.5;
  cursor:default
}
a {
  text-decoration:none;
  color:inherit
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:29px;
  letter-spacing:-1px;
  font-weight:650
}
h2 {
  font-size:22px
}
h3 {
  font-size:16px;
  font-weight:600
}
.muted {
  color:var(--muted)
}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  color:var(--green);
  font-weight:650;
  margin-bottom:13px
}
.shell {
  display:flex;
  min-height:100vh
}
.sidebar {
  width:220px;
  background:var(--navy);
  color:#dce7df;
  position:fixed;
  top:0;
  bottom:0;
  padding:32px 18px;
  display:flex;
  flex-direction:column
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:20px;
  font-weight:600;
  padding-left:8px;
  letter-spacing:-.6px
}
.brand-icon {
  height:37px;
  width:37px;
  border:1px solid #73927f;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:#ddf4d6;
  background:#284637;
  font-size:23px;
  font-family:Georgia,serif
}
.brand small {
  display:block;
  font-size:10px;
  letter-spacing:2px;
  color:#7c9b8e;
  margin-top:6px;
  font-weight:400
}
.workspace-tag {
  font-size:9px;
  letter-spacing:2px;
  color:#738c80;
  margin:45px 10px 18px;
  display:flex;
  justify-content:space-between
}
.workspace-tag span {
  letter-spacing:0
}
.nav-item {
  display:flex;
  align-items:center;
  width:100%;
  padding:13px 15px;
  gap:13px;
  color:#93aba0;
  text-align:left;
  margin:3px 0;
  border-radius:7px;
  font-size:13px
}
.nav-item.active {
  color:#e1f2e2;
  background:#284737
}
.nav-icon {
  font-size:19px;
  width:20px;
  text-align:center
}
.nav-item:hover {
  background:#1a352a
}
.sidebar-bottom {
  margin-top:auto;
  border-top:1px solid #294034;
  padding:24px 8px 2px;
  display:flex;
  gap:10px;
  font-size:12px;
  color:#b6cbbd
}
.sidebar-bottom small {
  display:block;
  color:#6f8d7b;
  font-size:10px;
  margin-top:8px
}
.connection-dot {
  width:7px;
  height:7px;
  border-radius:100%;
  background:#afd796;
  margin-top:4px
}
.main-shell {
  margin-left:220px;
  width:calc(100% - 220px)
}
.topbar {
  height:73px;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:0 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px
}
.breadcrumb {
  color:var(--muted)
}
.slash {
  margin:0 16px;
  color:#bac8c0
}
.topbar-right {
  display:flex;
  align-items:center;
  gap:22px
}
.environment {
  background:#f1f4eb;
  color:#678150;
  border:1px solid #e1e9d8;
  padding:5px 9px;
  border-radius:4px;
  font-size:10px;
  letter-spacing:.6px
}
.icon-button {
  font-size:20px;
  color:var(--muted)
}
main {
  max-width:1620px;
  padding:34px 42px
}
.page-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:28px
}
.page-head .muted {
  margin-top:11px;
  font-size:12px
}
.actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.primary {
  background:var(--green);
  color:#fff;
  padding:11px 18px;
  border-radius:6px;
  font-size:12px;
  display:inline-flex;
  gap:16px;
  justify-content:center;
  align-items:center
}
.primary:hover {
  background:#12664e
}
.secondary {
  background:#fff;
  border:1px solid #dce6df;
  padding:10px 14px;
  border-radius:6px;
  font-size:12px;
  white-space:nowrap
}
.secondary:hover {
  background:#f0f5f1
}
.text-button {
  color:var(--green);
  font-size:12px;
  padding:5px 7px
}
.danger {
  color:var(--red)
}
.filters {
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  margin-bottom:22px;
  flex-wrap:wrap
}
.filters input,.filters select {
  background:#fff;
  border:0;
  padding:5px;
  color:#51665a;
  font-size:12px
}
.filter-divider {
  height:20px;
  width:1px;
  background:var(--line);
  margin:0 7px
}
.filters small {
  margin-left:auto;
  font-size:10px
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:20px
}
.stat {
  border:1px solid var(--line);
  border-radius:8px;
  padding:22px 22px 18px;
  background:#fff;
  min-height:139px
}
.stat.featured {
  background:var(--navy);
  border-color:var(--navy);
  color:#eff8f0
}
.stat-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-size:12px
}
.stat.featured .stat-top {
  color:#a0bba9
}
.stat-symbol {
  color:#95b29a;
  font-size:17px
}
.stat-value {
  font-size:31px;
  font-weight:600;
  letter-spacing:-1px;
  margin:18px 0 10px;
  font-variant-numeric:tabular-nums
}
.stat-note {
  font-size:10px;
  color:var(--muted)
}
.stat.featured .stat-note {
  color:#9caf9f
}
.stat-note strong {
  font-weight:500;
  color:var(--green)
}
.stat.featured .stat-note strong {
  color:#b5d9a8
}
.overview-middle {
  display:grid;
  grid-template-columns:1.8fr 1fr;
  gap:20px;
  margin-bottom:20px
}
.panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:20px
}
.overview-middle .panel {
  margin:0
}
.panel-head {
  padding:22px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #eff3f0
}
.panel-head small {
  font-size:10px;
  color:var(--muted);
  margin-top:6px;
  display:block
}
.panel-head h3 {
  font-size:14px
}
.chart {
  padding:15px 24px 20px;
  height:210px
}
.chart svg {
  width:100%;
  height:100%
}
.chart text {
  fill:#8b9a90;
  font-size:10px
}
.legend {
  font-size:10px;
  color:var(--muted);
  display:flex;
  gap:15px
}
.legend i {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--green);
  margin-right:6px
}
.legend .light {
  background:#bcd7c4
}
.funnel {
  padding:6px 24px 24px
}
.funnel-row {
  display:flex;
  justify-content:space-between;
  padding:13px 0;
  border-bottom:1px solid #eef2ed;
  font-size:12px
}
.funnel-row:last-child {
  border:0
}
.funnel-row strong {
  font-weight:550;
  font-variant-numeric:tabular-nums
}
.funnel-row .tiny {
  color:var(--muted);
  font-size:10px;
  margin-right:8px
}
.table-wrap {
  overflow:auto
}
table {
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  white-space:nowrap
}
th {
  text-align:left;
  color:#8a9a90;
  font-weight:450;
  padding:14px 24px;
  background:#fbfcfa;
  border-bottom:1px solid var(--line);
  font-size:10px
}
td {
  padding:16px 24px;
  border-bottom:1px solid #edf2ec
}
tbody tr:last-child td {
  border-bottom:0
}
tbody tr:hover {
  background:#fcfdfb
}
.table-sub {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-top:7px
}
.table-name {
  font-weight:550
}
.money {
  font-variant-numeric:tabular-nums;
  font-weight:550
}
.badge {
  display:inline-block;
  padding:4px 7px;
  border-radius:4px;
  font-size:10px;
  font-weight:500;
  background:#f1f4f0;
  color:#7c897d
}
.badge.SUCCESS,.badge.CLAIMED,.badge.ACTIVE,.badge.NORMAL {
  background:#edf6ef;
  color:#338264
}
.badge.UNKNOWN,.badge.PROCESSING,.badge.REVIEW,.badge.COOKIE_EXPIRED {
  background:#fcf4e5;
  color:var(--gold)
}
.badge.FAILED,.badge.REQUEST_FAILED,.badge.ENDED {
  background:#fbeeee;
  color:var(--red)
}
.badge.TEST {
  background:#eef0f6;
  color:#68739b
}
.badge.AUTO {
  background:#eaf4ee;
  color:#348269
}
.empty {
  padding:48px;
  text-align:center;
  color:var(--muted);
  line-height:1.8
}
.empty strong {
  display:block;
  font-size:15px;
  color:#7e9384;
  margin-bottom:7px
}
.search-row {
  display:flex;
  gap:12px;
  padding:15px 20px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap
}
.search-row input,.search-row select {
  border:1px solid var(--line);
  border-radius:5px;
  font-size:12px;
  padding:8px 10px;
  background:#fff;
  max-width:220px
}
.pagination {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  padding:15px 24px;
  font-size:11px;
  color:var(--muted)
}
.notice {
  padding:13px 18px;
  border-radius:6px;
  font-size:12px;
  margin-bottom:20px;
  background:#edf4ef;
  color:#678572;
  line-height:1.8
}
.notice strong {
  color:#427559
}
.split-panels {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.mock-card {
  padding:24px;
  line-height:1.8
}
.mock-card p {
  margin:12px 0;
  font-size:12px;
  color:var(--muted)
}
.mock-card label {
  margin-top:15px
}
.mock-card button {
  margin-top:15px
}
.step {
  border-left:2px solid #d7e6d8;
  padding:0 0 20px 20px;
  margin-left:10px
}
.step:last-child {
  padding-bottom:0
}
.step strong {
  font-size:13px
}
.step p {
  margin:6px 0 0;
  font-size:12px;
  color:var(--muted)
}
footer {
  border-top:1px solid var(--line);
  padding-top:23px;
  margin-top:32px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#a0aea2
}
dialog {
  border:1px solid var(--line);
  border-radius:12px;
  padding:0;
  width:650px;
  max-width:94vw;
  max-height:90vh;
  color:var(--ink);
  box-shadow:0 20px 100px #092c2030
}
dialog::backdrop {
  background:#10231e70;
  backdrop-filter:blur(3px)
}
.modal-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 28px;
  border-bottom:1px solid var(--line)
}
.modal-body {
  padding:24px 28px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.span-2 {
  grid-column:span 2
}
label {
  display:block;
  font-size:12px;
  color:#6a7f70
}
label input,label select,label textarea {
  display:block;
  width:100%;
  border:1px solid #dce6df;
  border-radius:5px;
  padding:11px 12px;
  margin-top:9px;
  color:var(--ink);
  background:#fff
}
textarea {
  resize:vertical;
  min-height:85px
}
.form-note {
  font-size:11px;
  color:var(--muted);
  margin-top:15px;
  line-height:1.7
}
.modal-footer {
  padding:20px 28px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px
}
.error-text {
  color:var(--red);
  font-size:12px;
  line-height:1.7;
  min-height:18px;
  margin-top:15px
}
pre {
  background:#f4f7f3;
  border:1px solid var(--line);
  padding:16px;
  border-radius:5px;
  font-size:11px;
  line-height:1.8;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px;
  font-size:12px
}
.detail-grid small {
  color:var(--muted);
  display:block;
  margin-bottom:5px
}
#toast {
  position:fixed;
  bottom:28px;
  right:30px;
  background:#183e2e;
  color:#f3faf2;
  padding:15px 23px;
  border-radius:8px;
  font-size:12px;
  box-shadow:0 8px 25px #0002;
  z-index:10
}
.login-screen {
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr
}
.login-brand {
  background:var(--navy);
  color:#f2f8ef;
  padding:80px 13%;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.login-brand .brand-icon {
  width:55px;
  height:55px;
  font-size:33px;
  margin-bottom:55px
}
.login-brand .eyebrow {
  color:#8da889
}
.login-brand h1 {
  font-size:48px;
  line-height:1.45;
  letter-spacing:-2px;
  margin-bottom:25px
}
.login-brand p {
  font-size:13px;
  color:#9bb2a0;
  line-height:1.9
}
.login-line {
  height:1px;
  width:90px;
  background:#678365;
  margin:40px 0 15px
}
.login-card {
  align-self:center;
  justify-self:center;
  width:340px
}
.login-card h2 {
  font-size:30px;
  margin:10px 0 16px
}
.login-card .muted {
  font-size:12px;
  margin-bottom:35px
}
.login-card label {
  margin:22px 0
}
.login-card .primary {
  width:100%;
  margin-top:15px;
  justify-content:space-between;
  padding:14px 18px
}
.fine {
  color:#97a59a;
  font-size:10px;
  line-height:1.8;
  margin-top:25px
}
.highlight {
  color:var(--green)
}
.align-right {
  text-align:right
}
[hidden] {
  display:none!important
}
@media(min-width:1500px) {
  .stats-grid {
  gap:22px
}
.stat {
  padding:24px 26px
}

}
@media(max-width:1150px) {
  .sidebar {
  width:185px;
  padding:28px 12px
}
.brand {
  font-size:17px
}
.main-shell {
  margin-left:185px;
  width:calc(100% - 185px)
}
main {
  padding:28px 25px
}
.topbar {
  padding:0 25px
}
.stats-grid {
  grid-template-columns:repeat(2,1fr)
}
td,th {
  padding:14px 18px
}

}
@media(max-width:760px) {
  .sidebar {
  position:static;
  width:100%;
  padding:16px
}
.shell {
  display:block
}
.sidebar .workspace-tag,.sidebar-bottom {
  display:none
}
.brand {
  font-size:19px
}
.sidebar nav {
  display:flex;
  overflow:auto;
  margin-top:15px
}
.nav-item {
  width:auto;
  white-space:nowrap;
  padding:10px
}
.nav-icon {
  display:none
}
.main-shell {
  margin:0;
  width:100%
}
.topbar {
  height:55px;
  padding:0 20px
}
.topbar-right {
  gap:10px
}
main {
  padding:25px 17px
}
.page-head {
  align-items:flex-start;
  gap:15px
}
.page-head h1 {
  font-size:24px
}
.page-head .actions {
  justify-content:flex-end
}
.overview-middle,.split-panels {
  grid-template-columns:1fr
}
.filters {
  gap:7px
}
.filters small {
  width:100%;
  margin:5px
}
.stats-grid {
  gap:10px
}
.stat {
  padding:16px
}
.stat-value {
  font-size:27px
}
.login-screen {
  grid-template-columns:1fr
}
.login-brand {
  display:none
}
.login-card {
  max-width:85vw
}
.form-grid {
  grid-template-columns:1fr
}
.span-2 {
  grid-column:span 1
}
footer span {
  display:none
}

}