:root {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #15231d;
  background: #eef4ef;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
button {
  border: 0; border-radius: .65rem; padding: .65rem .9rem; cursor: pointer;
  color: white; background: #176b45; font-weight: 650;
}
button:hover { background: #0f5436; }
button.secondary { color: #176b45; background: #e0eee6; }
input {
  min-width: 0; padding: .65rem .75rem; border-radius: .6rem;
  border: 1px solid #bfd0c5; background: #fff; color: #15231d;
}
header {
  display: flex; justify-content: space-between; align-items: end; gap: 2rem;
  padding: 2.5rem max(1rem, calc((100vw - 1180px) / 2));
  color: #f8fff9; background: #123d2b;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .4rem; font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -.04em; }
.eyebrow { margin-bottom: .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.muted { color: #627168; }
header .muted { color: #bed1c5; }
.api-key { display: grid; gap: .4rem; min-width: min(100%, 25rem); font-size: .8rem; font-weight: 700; }
.api-key span { display: flex; gap: .5rem; }
.api-key input { flex: 1; }
main {
  width: min(1180px, calc(100% - 2rem)); margin: -1rem auto 4rem;
  display: grid; grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr); gap: 1rem;
}
.panel { padding: 1.25rem; border: 1px solid #d2ddd6; border-radius: 1rem; background: #fff; box-shadow: 0 12px 30px #0c2a1810; }
.panel:last-of-type { grid-column: 1 / -1; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.section-title h2, .section-title h3 { margin-bottom: .5rem; }
.stack { display: grid; gap: .65rem; margin-bottom: 1rem; }
.stack label { font-size: .86rem; }
.list { display: grid; gap: .5rem; }
.item {
  width: 100%; padding: .8rem; border: 1px solid #dbe4de; border-radius: .7rem;
  color: inherit; background: #f9fbf9; text-align: left; font-weight: 500;
}
.item:hover, .item.active { color: inherit; background: #e6f2ea; border-color: #7ead91; }
.item strong, .item span { display: block; overflow: hidden; text-overflow: ellipsis; }
.item span { margin-top: .2rem; color: #69776e; font-size: .8rem; }
.mail-layout { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; }
.folders { display: grid; align-content: start; gap: .35rem; }
.folders button { color: #254b37; background: transparent; text-align: left; }
.folders button.active { color: white; background: #176b45; }
.grid-form { display: grid; grid-template-columns: 1fr 1fr 1fr 8rem auto; gap: .6rem; }
pre { padding: 1rem; overflow: auto; border-radius: .7rem; background: #f2f5f3; white-space: pre-wrap; word-break: break-word; }
dialog { width: min(780px, calc(100% - 2rem)); border: 0; border-radius: 1rem; padding: 1.5rem; color: inherit; background: #fff; }
dialog::backdrop { background: #061a10aa; }
.close { float: right; padding: .2rem .65rem; font-size: 1.5rem; }
#toast {
  position: fixed; right: 1rem; bottom: 1rem; max-width: min(28rem, calc(100% - 2rem));
  padding: .8rem 1rem; border-radius: .7rem; color: white; background: #a2352b;
  opacity: 0; transform: translateY(.5rem); pointer-events: none; transition: .2s;
}
#toast.show { opacity: 1; transform: none; }
@media (max-width: 800px) {
  header { align-items: stretch; flex-direction: column; }
  main { grid-template-columns: 1fr; margin-top: 1rem; }
  .panel:last-of-type { grid-column: auto; }
  .grid-form { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .mail-layout { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) {
  :root { color: #e6f0e9; background: #0d1712; }
  .panel, dialog { background: #15221b; border-color: #2b4034; }
  input { color: #e6f0e9; background: #101b15; border-color: #405648; }
  .item { color: inherit; background: #17271e; border-color: #2b4034; }
  .item:hover, .item.active { background: #203b2c; border-color: #5a8b70; }
  .muted, .item span { color: #a7b5ac; }
  pre { background: #101b15; }
}