:root{
  color-scheme: dark;
  --bg:#0b0f14;
  --text:#e8eef6;
  --muted:#9aa8b7;
  --border:rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  --primary:#3b82f6;
  --primary-border:rgba(59,130,246,.45);
  --primary-bg:rgba(59,130,246,.18);
  --primary-hover-bg:rgba(59,130,246,.24);

  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#ef4444;
  --neutral:#64748b;

  --code:#c7d2fe;
  --btn-bg:rgba(255,255,255,.03);
  --btn-hover-bg:rgba(255,255,255,.06);
  --card-bg:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  --card-head-bg:rgba(255,255,255,.02);
  --card-foot-bg:rgba(0,0,0,.10);
  --kv-border:rgba(255,255,255,.06);
  --pill-bg:rgba(255,255,255,.03);
  --pill-ok-border:rgba(34,197,94,.55);
  --pill-ok-bg:rgba(34,197,94,.12);
  --pill-warn-border:rgba(245,158,11,.55);
  --pill-warn-bg:rgba(245,158,11,.12);
  --pill-err-border:rgba(239,68,68,.55);
  --pill-err-bg:rgba(239,68,68,.12);
  --pill-neutral-border:rgba(100,116,139,.55);
  --pill-neutral-bg:rgba(100,116,139,.12);
  --label:#d7e3f1;
  --input-border:rgba(255,255,255,.12);
  --input-bg:rgba(0,0,0,.18);
  --input-focus-border:rgba(59,130,246,.55);
  --input-focus-ring:rgba(59,130,246,.14);
  --notice-border:rgba(255,255,255,.18);
  --notice-bg:rgba(255,255,255,.03);
  --danger-border:rgba(239,68,68,.30);
  --panel-bg:#0f172a;
  --panel-item-bg:#0f172a;
  --panel-item-hover-bg:#1f2937;
  --radius:16px;
  --pad:16px;
  --max:1100px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f6f7fb;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.12);
  --shadow: 0 10px 30px rgba(2,6,23,.08);

  --primary:#3b82f6;
  --primary-border:rgba(59,130,246,.45);
  --primary-bg:rgba(59,130,246,.12);
  --primary-hover-bg:rgba(59,130,246,.18);

  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#ef4444;
  --neutral:#64748b;

  --code:#4338ca;
  --btn-bg:rgba(15,23,42,.03);
  --btn-hover-bg:rgba(15,23,42,.06);
  --card-bg:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.95));
  --card-head-bg:rgba(15,23,42,.02);
  --card-foot-bg:rgba(15,23,42,.03);
  --kv-border:rgba(15,23,42,.08);
  --pill-bg:rgba(15,23,42,.02);
  --pill-ok-border:rgba(34,197,94,.5);
  --pill-ok-bg:rgba(34,197,94,.14);
  --pill-warn-border:rgba(245,158,11,.5);
  --pill-warn-bg:rgba(245,158,11,.16);
  --pill-err-border:rgba(239,68,68,.5);
  --pill-err-bg:rgba(239,68,68,.14);
  --pill-neutral-border:rgba(100,116,139,.45);
  --pill-neutral-bg:rgba(100,116,139,.12);
  --label:#1f2937;
  --input-border:rgba(15,23,42,.18);
  --input-bg:#ffffff;
  --input-focus-border:rgba(59,130,246,.6);
  --input-focus-ring:rgba(59,130,246,.18);
  --notice-border:rgba(15,23,42,.18);
  --notice-bg:rgba(15,23,42,.03);
  --danger-border:rgba(239,68,68,.35);
  --panel-bg:#ffffff;
  --panel-item-bg:#ffffff;
  --panel-item-hover-bg:#e2e8f0;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background: var(--bg);
}

a{ text-decoration: none; color: inherit; }
a:hover{ text-decoration: none; }

.rowLink{ display:block; width:100%; }

code{ font-family: var(--mono); font-size: .92em; color:var(--code); }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px;
}

.stack{
  display:flex;
  flex-direction:column;
  gap: 16px;
}

.card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 14px var(--pad);
  background: var(--card-head-bg);
  border-bottom: 1px solid var(--border);
}

.card__title{
  margin:0;
  font-size: 1rem;
  font-weight: 750;
}

.card__body{ padding: var(--pad); }

.card__foot{
  padding: 10px var(--pad);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
  background: var(--card-foot-bg);
}

.btn{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 650;
  color: var(--text);
  background: var(--btn-bg);
  cursor:pointer;
}
.btn:hover{ background: var(--btn-hover-bg); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn--primary{
  border-color: var(--primary-border);
  background: var(--primary-bg);
}
.btn--primary:hover{ background: var(--primary-hover-bg); }
.btn--ghost{ background: transparent; }
.btn--mini{
  padding: 6px 8px;
  font-size: .78rem;
  border-radius: 999px;
}

.w100{ width:100%; }

.tabs{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tabBtn{
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--btn-bg);
  cursor: pointer;
}

.tabBtn--active{
  color: var(--text);
  border-color: var(--primary-border);
  background: var(--primary-bg);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.tabSection.hidden{ display:none; }

.notice{
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed var(--notice-border);
  background: var(--notice-bg);
}

.pill{
  font-size: .78rem;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--pill-bg);
}
.pill--ok{ border-color: var(--pill-ok-border); background: var(--pill-ok-bg); }
.pill--warn{ border-color: var(--pill-warn-border); background: var(--pill-warn-bg); }
.pill--err{ border-color: var(--pill-err-border); background: var(--pill-err-bg); }
.pill--neutral{ border-color: var(--pill-neutral-border); background: var(--pill-neutral-bg); }

.formRow{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-bottom: 14px;
}
.label{
  font-weight: 750;
  font-size: .92rem;
  color: var(--label);
}
.input{
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  font: inherit;
}
.input:focus{
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 4px var(--input-focus-ring);
}
.input--error{
  border-color: var(--danger-border);
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}
.hint{ font-size: .9rem; line-height: 1.35; color: var(--muted); }

.rowInline{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.autocomplete{
  position: relative;
}

.autocomplete__field{
  position: relative;
}

.autocomplete__input{
  padding-right: 40px;
}

.autocomplete__toggle{
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.autocomplete__toggle:hover{ background: var(--btn-hover-bg); }
.autocomplete__toggle:disabled{ opacity: .5; cursor: not-allowed; }

.autocomplete__icon{
  width: 14px;
  height: 14px;
}

.autocomplete__list{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  opacity: 1;
}

.autocomplete__option{
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--panel-item-bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.autocomplete__option:hover,
.autocomplete__option.is-active{
  border-color: var(--border);
  background: var(--panel-item-hover-bg);
}

.autocomplete__status{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--panel-item-bg);
  color: var(--muted);
  font-size: .92rem;
}

.formFields{
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.kv{ padding: 4px var(--pad) 14px; }
.kv__row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--kv-border);
}
.kv__row:last-child{ border-bottom: 0; }
.kv__k{
  color: var(--muted);
  flex: 0 0 auto;
}
.kv__v{
  font-weight: 700;
  text-align:right;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px;
  overflow-wrap:anywhere;
  word-break: break-word;
}

.muted{ color: var(--muted); }
.mono{ font-family: var(--mono); }
.textError{ color: var(--err); font-weight: 600; }
.errorText:empty{ display:none; }

.checklist{
  list-style: none;
  padding: 0;
  margin: 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.checklist li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: var(--muted);
}
.checklist li::before{
  content: "*";
  color: var(--primary);
}

.fileList{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fileList li{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  font-family: var(--mono);
  font-size: .9rem;
}

.installSlot{
  display:block;
  margin-top: 10px;
  color: var(--muted);
  font-size: .9rem;
}

.statusRow{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.shrinkable{
  white-space: nowrap;
  display:inline-block;
  max-width: 100%;
}

.shrink-wrap{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#customerInstallButton{
  --esp-tools-button-color: var(--primary);
  --esp-tools-button-text-color: var(--text);
  --esp-tools-button-border-radius: 14px;
}

.spinner{
  display:inline-block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
}

.hidden{ display:none; }

@keyframes spin{
  to{ transform: rotate(360deg); }
}

@media (min-width: 860px){
  .kv__row{ gap: 24px; }
}