.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.shell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--shell);
  color: var(--shell-ink);
  flex: none;
}
.brand {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.brand small {
  font-weight: 400;
  margin-left: 8px;
  color: var(--shell-quiet);
}
.sp {
  flex: 1;
}
.user {
  font-size: 12px;
  color: var(--shell-quiet);
}
.out,
.fields,
.burger {
  background: transparent;
  color: var(--shell-ink);
  border: 1px solid var(--shell-quiet);
  border-radius: var(--radius-lg);
  padding: 2px 10px;
  cursor: pointer;
}
.burger {
  padding: 2px 8px;
}
.fields {
  margin-right: 10px;
  font-size: 12px;
  padding: 1px 8px;
}
.fields.on {
  background: rgba(255, 255, 255, 0.18);
}
.out:hover,
.fields:hover,
.burger:hover {
  background: rgba(255, 255, 255, 0.08);
}
.body {
  display: flex;
  flex: 1;
  min-height: 0;
}
.side {
  width: 224px;
  flex: none;
  overflow-y: auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 6px 0;
}
.mod {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 12px;
  background: none;
  border: none;
  font-weight: 600;
  cursor: pointer;
}
.mod:hover {
  background: var(--btn-h);
}
.caret {
  display: inline-block;
  width: 14px;
  color: var(--quiet);
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li a {
  display: block;
  padding: 4px 12px 4px 28px;
  color: var(--ink);
  text-decoration: none;
}
li a:hover {
  background: var(--btn-h);
}
li a.active {
  background: var(--row-sel);
  border-left: 3px solid var(--focus);
  padding-left: 25px;
  font-weight: 600;
}
.note {
  margin: 8px 12px;
  color: var(--quiet);
  font-size: 12px;
}
.note.err {
  color: var(--err);
}
.content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 16px;
}
@media (min-width: 901px) {
  .side.hidden {
    display: none;
  }
}
@media (max-width: 900px) {
  .user {
    display: none;
  }
  .side {
    display: none;
    position: absolute;
    top: 38px;
    bottom: 0;
    z-index: 30;
    box-shadow: var(--shadow-pop);
  }
  .side.open {
    display: block;
  }
}