:root {
  --ink: #15241f;
  --muted: #708078;
  --line: #e3e9e6;
  --paper: #f6f8f5;
  --white: #fff;
  --green: #1e6b4d;
  --lime: #cbed6e;
  --orange: #ed8f4d;
  --red: #c64d4d;
  --shadow: 0 22px 70px rgba(21, 36, 31, 0.09);
}

.public-home{min-height:100vh;background:#071a15;color:#edf6ef;overflow:hidden}.public-nav{height:84px;max-width:1440px;margin:auto;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}.public-logo{display:flex;align-items:center;gap:14px;color:#fff;text-decoration:none;letter-spacing:.08em}.public-logo span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#c7f16b;color:#133024;font-weight:900}.public-logo strong{font-size:20px}.public-nav-actions{display:flex;align-items:center;gap:28px}.public-nav-actions a{color:#c9d9d1;text-decoration:none;font-size:14px}.public-nav-actions .public-nav-primary{padding:11px 20px;background:#c7f16b;color:#102a20;border-radius:999px;font-weight:750}.public-hero{min-height:680px;position:relative;display:grid;grid-template-columns:minmax(440px,.85fr) minmax(640px,1.3fr);align-items:center;max-width:1600px;margin:auto;padding:42px 0 78px 7vw}.public-hero-copy{position:relative;z-index:2;max-width:660px}.public-kicker{color:#b6da72;font-size:12px;font-weight:800;letter-spacing:.19em}.public-hero h1{font-size:clamp(52px,5vw,88px);line-height:1.03;letter-spacing:-.055em;margin:25px 0;color:#f5fbf7}.public-hero h1 em{font-style:normal;color:#c7f16b}.public-hero-copy>p{max-width:590px;color:#acc2b8;font-size:18px;line-height:1.85}.public-hero-actions{display:flex;gap:14px;margin:34px 0}.public-cta{padding:15px 27px;border-radius:999px;background:#c7f16b;color:#102a20;text-decoration:none;font-weight:800}.public-cta.secondary{background:transparent;color:#edf6ef;border:1px solid #577066}.public-trust{display:flex;flex-wrap:wrap;gap:22px;color:#779b8b;font-size:13px}.public-trust span:before{content:'✓';color:#c7f16b;margin-right:7px}.public-visual{height:580px;min-width:0;position:relative}.public-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#071a15 0%,transparent 30%),linear-gradient(0deg,#071a15 0%,transparent 23%);pointer-events:none}.public-visual img{width:100%;height:100%;object-fit:cover;object-position:center right;filter:saturate(.92) contrast(1.03)}.public-capabilities{max-width:1360px;margin:0 auto 70px;padding:0 5vw;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#244238;border:1px solid #244238}.public-capabilities article{background:#0b211a;padding:34px}.public-capabilities b{color:#c7f16b;font-size:12px;letter-spacing:.15em}.public-capabilities h2{margin:17px 0 11px;font-size:22px}.public-capabilities p{color:#8da99c;line-height:1.75;margin:0}.public-footer{max-width:1360px;margin:auto;padding:24px 5vw 35px;border-top:1px solid #203a31;display:flex;justify-content:space-between;color:#708c80;font-size:13px}.inline-code{display:grid;grid-template-columns:1fr auto;gap:8px}.inline-code button{white-space:nowrap;padding-left:14px;padding-right:14px}.forgot-link{display:block;text-align:center;margin-top:16px;color:#24765a;text-decoration:none;font-size:13px}.auth-footer a{color:#24765a;text-decoration:none}

@media(max-width:980px){.public-nav{height:72px}.public-nav-actions a:not(.public-nav-primary){display:none}.public-hero{grid-template-columns:1fr;min-height:auto;padding:70px 6vw 20px}.public-hero-copy{max-width:720px}.public-visual{height:360px;margin:5px -6vw 0}.public-visual:after{background:linear-gradient(180deg,#071a15 0%,transparent 24%),linear-gradient(0deg,#071a15 0%,transparent 20%)}.public-capabilities{grid-template-columns:1fr;margin:0 5vw 50px;padding:0}.public-footer{margin:0 5vw;padding-left:0;padding-right:0}}

@media(max-width:560px){.public-hero{padding-top:52px}.public-hero h1{font-size:44px}.public-hero-copy>p{font-size:16px}.public-hero-actions{flex-direction:column}.public-cta{text-align:center}.public-visual{height:260px}.public-footer{gap:15px;flex-direction:column}.inline-code{grid-template-columns:1fr}.inline-code button{width:100%}}
.aggregate-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:12px 0 20px}.aggregate-option{display:grid!important;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px!important;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer}.aggregate-option>input{width:19px;height:19px}.aggregate-option>span{display:grid;grid-template-columns:58px 1fr;column-gap:10px;align-items:center;min-width:0}.aggregate-option img{grid-row:1/3;width:58px;height:42px;object-fit:cover;border-radius:8px}.aggregate-option strong,.aggregate-option small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.aggregate-option small{color:var(--muted)}.device-targets{margin:18px 0}.report-url{display:inline-block;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--green)}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.report-filters label{min-width:150px}
.aggregate-option.is-incompatible{opacity:.42;background:#f2f4f3;cursor:not-allowed}.aggregate-option.is-incompatible strong{text-decoration:line-through}.aggregate-option input:disabled{cursor:not-allowed}
.public-home .public-nav{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:0;overflow:visible;padding:0 5vw}.public-home .public-nav-actions{display:flex;flex-direction:row;align-items:center;gap:28px;overflow:visible;padding:0}
.report-pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:18px 4px 2px}.report-pagination button{width:auto;min-width:88px}.report-pagination button:disabled{cursor:not-allowed;opacity:.45}.report-pagination span{min-width:70px;text-align:center;color:var(--muted);font-size:13px}.report-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0;padding:5px;width:max-content;max-width:100%;border:1px solid var(--line);border-radius:12px;background:#eef3f0}.report-tabs button{width:auto;padding:9px 16px;background:transparent;color:var(--muted);font-weight:650}.report-tabs button.active{background:#fff;color:var(--green);box-shadow:0 2px 9px rgba(21,36,31,.09)}
.targeting-panel{margin:22px 0;padding:20px;border:1px solid var(--line);border-radius:15px;background:#f9fbfa}.targeting-heading h3{margin:0 0 6px}.targeting-heading p{margin:0}.targeting-panel fieldset{margin:16px 0 0;padding:17px 0 0}.targeting-options{display:flex;flex-wrap:wrap;gap:9px}.targeting-options .target-option{margin:0;padding:10px 13px;border:1px solid #d8e1dc;border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}.targeting-options .target-option:has(input:checked){border-color:var(--green);background:#eaf4ef;color:var(--green);font-weight:700}.targeting-options input{accent-color:var(--green)}.targeting-split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.country-pickers{display:grid;grid-template-columns:1fr 1fr;gap:14px}.country-picker{border:1px solid #d8e1dc;border-radius:12px;background:#fff;overflow:hidden}.country-picker summary{cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:13px 15px;font-weight:700;color:var(--ink)}.country-picker summary span{color:var(--green);font-size:12px;font-weight:600}.country-picker-body{padding:0 12px 12px}.country-picker-body>input{margin-bottom:9px}.country-list{height:260px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:5px}.country-option{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;margin:0;padding:8px;border-radius:7px;cursor:pointer}.country-option:hover{background:#f0f5f2}.country-option[hidden]{display:none!important}.country-option input{width:auto;margin:0;accent-color:var(--green)}.country-option small{color:var(--muted)}.advanced-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:18px}.advanced-setting-card{margin-top:0}.setting-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.setting-card-head h3{margin-bottom:6px}.setting-card-head p{margin:0;line-height:1.6}.setting-card-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:16px;margin-top:8px;border-top:1px solid var(--line)}.setting-card-footer label{margin:0}.setting-toggle{min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fbfcfb}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.hidden {
  display: none !important;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
}
.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(520px, 1.15fr);
  gap: 6vw;
  padding: 5vw;
  background:
    radial-gradient(
      circle at 5% 95%,
      rgba(203, 237, 110, 0.6),
      transparent 32%
    ),
    var(--ink);
}
.hero {
  align-self: center;
  color: #fff;
  max-width: 620px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #99ac9f;
  font-weight: 700;
}
.hero h1 {
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(42px, 5.5vw, 78px);
  line-height: 1.08;
  margin: 24px 0;
}
.hero p {
  font-size: 18px;
  line-height: 1.8;
  color: #c7d1cc;
  max-width: 550px;
}
.secure-note {
  margin-top: 48px;
  border-left: 2px solid var(--lime);
  padding: 12px 18px;
  color: #aebdb5;
}
.panel {
  background: #fff;
  border-radius: 24px;
  padding: clamp(24px, 4vw, 58px);
  box-shadow: var(--shadow);
  align-self: center;
  max-width: 800px;
}
.steps {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
}
.steps span {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8eeeb;
  color: #75847d;
  font-size: 12px;
}
.steps span.active {
  background: var(--green);
  color: #fff;
}
.steps i {
  height: 1px;
  flex: 1;
  background: #dfe6e2;
}
.panel h2,
.login-card h2 {
  font-size: 30px;
  margin: 8px 0;
}
.muted {
  color: var(--muted);
}
fieldset {
  border: 0;
  border-top: 1px solid var(--line);
  padding: 22px 0 4px;
  margin: 18px 0;
}
legend {
  padding-right: 16px;
  font-weight: 700;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #53625b;
  font-size: 13px;
  margin: 12px 0;
}
input,
select {
  width: 100%;
  border: 1px solid #d6ded9;
  border-radius: 9px;
  padding: 12px 13px;
  outline: none;
  background: #fbfcfb;
  color: var(--ink);
}
input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(30, 107, 77, 0.1);
}
label.check {
  flex-direction: row;
  align-items: center;
}
.check input {
  width: auto;
}
.actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 28px;
}
button {
  padding: 12px 18px;
  border-radius: 9px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
}
button.secondary {
  background: #eaf0ed;
  color: var(--green);
}
button:disabled {
  opacity: 0.5;
}
.login-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5vw;
  gap: 4vw;
  background: var(--white);
}
.brand-card {
  border-radius: 28px;
  background: linear-gradient(145deg, #193d31, #10251e);
  color: white;
  padding: 7vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.brand-card:after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--lime);
  opacity: 0.14;
  right: -160px;
  bottom: -150px;
}
.brand-mark,
.logo span {
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--ink);
  font-weight: 900;
  width: 52px;
  height: 52px;
  border-radius: 16px;
}
.brand-card h1 {
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.12;
  max-width: 600px;
  margin: 45px 0 20px;
}
.brand-card p {
  color: #bed0c6;
  font-size: 18px;
}
.login-card {
  display: grid;
  place-items: center;
}
.login-card form {
  width: min(430px, 100%);
}
.login-card label {
  margin: 22px 0;
}
.login-card button {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
}
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
}
aside {
  background: var(--ink);
  color: #fff;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 30px;
}
.logo span {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.logo strong {
  letter-spacing: 0.12em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.config-preview {
  display: grid;
  gap: 7px;
  margin: 18px 0;
}
.config-preview small {
  color: var(--muted);
}
.config-preview code {
  overflow-wrap: anywhere;
}
nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding-right: 3px;
}
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nav-group-title {
  padding: 0 12px 5px;
  color: #71877d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.nav-child {
  padding-left: 22px;
}
.nav {
  background: transparent;
  color: #9fb1a8;
  text-align: left;
  font-weight: 500;
}
.nav:hover,
.nav.active {
  background: #294138;
  color: #fff;
}
.nav.active:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  margin-right: 10px;
}
.aside-foot {
  margin-top: auto;
  border-top: 1px solid #31433c;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aside-foot span {
  font-size: 10px;
  color: #9fb1a8;
}
.aside-foot button {
  background: transparent;
  color: #b5c1bb;
  padding: 6px;
}
.workspace {
  padding: 30px clamp(25px, 4vw, 64px);
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
header h1 {
  margin: 3px 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 38px;
}
.account {
  display: flex;
  align-items: center;
  gap: 10px;
}
.account > span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dce9df;
  color: var(--green);
  font-weight: 700;
}
.account div {
  display: flex;
  flex-direction: column;
}
.account small {
  color: var(--muted);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.metric,
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 22px;
}
.metric small {
  color: var(--muted);
}
.metric strong {
  display: block;
  font-size: 29px;
  margin: 12px 0 5px;
}
.metric em {
  font-style: normal;
  font-size: 12px;
  color: var(--green);
}
.card {
  margin-top: 18px;
}
.card h3 {
  margin-top: 0;
}
.status-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}
.bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center;
  gap: 15px;
  margin: 18px 0;
}
.bar {
  height: 8px;
  background: #edf1ef;
  border-radius: 5px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 5px;
}
.system-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.ok {
  color: var(--green);
}
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}
th,
td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
th {
  color: var(--muted);
  font-weight: 600;
}
.pill {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 20px;
  background: #edf5ef;
  color: var(--green);
  font-size: 11px;
}
.empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--muted);
}
#toast {
  position: fixed;
  z-index: 20;
  top: 22px;
  right: 22px;
  background: var(--ink);
  color: #fff;
  padding: 13px 18px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  transform: translateY(-100px);
  transition: 0.25s;
}
#toast.show {
  transform: none;
}
#toast.error {
  background: var(--red);
}
@media (max-width: 900px) {
  .shell,
  .login-wrap {
    grid-template-columns: 1fr;
  }
  .hero,
  .brand-card {
    display: none;
  }
  .app {
    grid-template-columns: 74px 1fr;
  }
  aside {
    padding: 20px 10px;
  }
  .logo strong,
  .nav,
  .nav-group-title {
    font-size: 0;
  }
  nav {
    gap: 8px;
  }
  .nav-group {
    gap: 4px;
  }
  .nav-child {
    padding-left: 14px;
  }
  .nav:before {
    margin: 0 !important;
  }
  .nav {
    height: 42px;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .status-grid {
    grid-template-columns: 1fr;
  }
  .workspace {
    padding: 22px 16px;
  }
  .account div {
    display: none;
  }
}
@media (max-width: 560px) {
  .grid,
  .metrics {
    grid-template-columns: 1fr;
  }
  .panel {
    border-radius: 0;
  }
  .shell {
    padding: 0;
  }
  .workspace header h1 {
    font-size: 28px;
  }
  .targeting-split,
  .country-pickers,
  .advanced-settings-grid {
    grid-template-columns: 1fr;
  }
  .setting-card-footer {
    align-items: stretch;
    flex-direction: column;
  }
}