:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  color: #171a18;
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --muted: #777d79;
  --line: #e8ebe9;
  --green: #246d4b;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.topbar {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 max(22px, calc((100% - 760px) / 2));
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 15px; font-weight: 700; letter-spacing: -.5px; }
.main { width: min(100% - 40px, 680px); margin: 55px auto 80px; }
h1 { margin: 0 0 22px; font-size: 23px; font-weight: 600; letter-spacing: -.6px; }
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #8b918d;
}
.search:focus-within { border-color: #a7b9ad; }
.search > span { font-size: 19px; }
.search input { width: 100%; border: 0; outline: 0; color: inherit; font-size: 13px; }
.search input::placeholder { color: #a3a9a5; }
.service-list { margin-top: 24px; border-top: 1px solid var(--line); }
.service-card {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.service-card:hover .card-title { color: var(--green); }
.tool-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 6px; background: #f2f4f2; color: #414843; font-size: 14px; }
.tool-icon.green { color: #327450; background: #eef5ef; }
.tool-icon.purple { color: #705b91; background: #f2eff7; }
.tool-icon.pink { color: #9b5365; background: #f8eff1; }
.tool-icon.blue { color: #426d8b; background: #eef3f7; }
.card-copy { min-width: 0; flex: 1; }
.card-title { margin: 0; font-size: 13px; font-weight: 600; }
.card-description { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.service-status { flex: 0 0 auto; color: #6d756f; font-size: 10px; }
.service-status.is-offline { color: #a36d35; }
.card-open { margin-left: 8px; color: #9aa09c; font-size: 15px; }
.empty-state { margin: 22px 0; color: var(--muted); font-size: 12px; }
.footer { padding: 18px 20px; border-top: 1px solid var(--line); color: #9aa09c; text-align: center; font-size: 10px; }

@media (max-width: 520px) {
  .main { margin-top: 38px; }
  .service-card { gap: 10px; }
  .card-description { max-width: 230px; }
  .service-status { font-size: 9px; }
}