:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #eef5f1;
  color: #173129;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(255, 190, 84, .25), transparent 35%),
    linear-gradient(150deg, #f7fbf8 0%, #e7f1ec 100%);
}

button, input { font: inherit; }

.shell {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.hero {
  padding: 24px 8px 20px;
}

.eyebrow {
  margin: 0 0 8px;
  color: #2e7d5b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(32px, 8vw, 54px); letter-spacing: -.04em; }
h2 { margin-bottom: 16px; font-size: 20px; }

.project { margin-bottom: 16px; color: #5f756d; }

.status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #dfe9e4;
  color: #41584f;
  font-size: 14px;
  font-weight: 700;
}

.status[data-state="connected"] { background: #d6f1e2; color: #15603d; }
.status[data-state="error"] { background: #ffe2de; color: #9c291f; }
.status[data-state="connecting"] { background: #fff0c9; color: #76520c; }

.panel {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid rgba(40, 75, 62, .1);
  border-radius: 22px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 14px 38px rgba(39, 70, 59, .08);
  backdrop-filter: blur(16px);
}

.section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

label {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  color: #41584f;
  font-size: 14px;
  font-weight: 700;
}

input[type="url"], input[type="text"], input[type="password"] {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #c7d5ce;
  border-radius: 12px;
  background: #fbfdfc;
  color: #173129;
}

input:focus-visible, button:focus-visible {
  outline: 3px solid rgba(46, 125, 91, .28);
  outline-offset: 2px;
}

.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { margin: -2px 0 14px; color: #6b7e76; font-size: 13px; line-height: 1.5; }

button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}

button:disabled { cursor: not-allowed; opacity: .45; }
.primary { width: 100%; background: #2e7d5b; color: white; }
.quiet { min-height: 32px; padding: 5px 10px; background: #e9f1ed; color: #315444; }

.color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.color {
  position: relative;
  min-height: 100px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: inset 0 -30px 40px rgba(0, 0, 0, .08);
}
.color span {
  position: absolute;
  right: 10px;
  bottom: 9px;
  left: 10px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .85);
  color: #17231f;
}
.red { background: #ef4b3f; }
.green { background: #37a86d; }
.blue { background: #3c78d8; }
.white { background: #fff; }
.warm { background: #ff8b35; }
.off { background: #27322e; }

.custom-color {
  display: grid;
  grid-template-columns: 1fr 70px 1.4fr;
  align-items: end;
  gap: 10px;
  margin-top: 16px;
}
.custom-color label { margin: 0; align-self: center; }
.custom-color input { width: 70px; height: 44px; padding: 3px; border: 1px solid #c7d5ce; border-radius: 10px; background: white; }
.custom-color button { background: #dfece5; color: #244d3a; }
.last-command { margin: 14px 0 0; color: #5f756d; font-size: 14px; }

footer { padding: 14px 8px; color: #667a72; font-size: 12px; line-height: 1.6; }

@media (max-width: 520px) {
  .two-columns { grid-template-columns: 1fr; gap: 0; }
  .color-grid { grid-template-columns: repeat(2, 1fr); }
  .custom-color { grid-template-columns: 1fr 70px; }
  .custom-color button { grid-column: 1 / -1; }
}