:root {
  --vibeloki-paper: #f4f7ef;
  --vibeloki-white: #ffffff;
  --vibeloki-ink: #161715;
  --vibeloki-muted: #586055;
  --vibeloki-line: #cbd3c4;
  --vibeloki-line-strong: #a7b29d;
  --vibeloki-red: #e44732;
  --vibeloki-teal: #0b8f8d;
  --vibeloki-moss: #728e35;
  --vibeloki-blue: #2869a6;
  --vibeloki-radius: 8px;
}

html,
body {
  min-height: 100%;
}

body {
  background:
    linear-gradient(90deg, rgb(22 23 21 / 4.5%) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, rgb(22 23 21 / 4%) 1px, transparent 1px) 0 0 / 42px 42px,
    var(--vibeloki-paper);
  color: var(--vibeloki-ink);
  font-family: "Avenir Next", "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgb(228 71 50 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(11 143 141 / 7%) 1px, transparent 1px);
  background-size: 100% 19px, 29px 100%;
  mix-blend-mode: multiply;
  opacity: .42;
}

a,
button,
input,
select,
textarea {
  font-family: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--vibeloki-blue);
  outline-offset: 3px;
}

#container {
  min-width: 0;
}

#header {
  min-height: 72px;
  padding: 14px clamp(18px, 4vw, 48px);
  border-bottom: 1px solid rgb(22 23 21 / 12%);
  background: rgb(244 247 239 / 88%);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

#branding {
  display: flex;
  align-items: center;
  min-width: 0;
}

#site-name {
  margin: 0;
  padding: 0;
}

.vibeloki-admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--vibeloki-ink);
  text-decoration: none;
}

.vibeloki-admin-mark {
  display: block;
  width: 42px;
  height: 42px;
  padding: 5px;
  border: 1px solid var(--vibeloki-line-strong);
  border-radius: var(--vibeloki-radius);
  background: var(--vibeloki-white);
}

.vibeloki-admin-wordmark,
.vibeloki-admin-wordmark strong,
.vibeloki-admin-wordmark small {
  display: block;
}

.vibeloki-admin-wordmark strong {
  font-size: 16px;
  line-height: 1.1;
}

.vibeloki-admin-wordmark small,
#user-tools {
  color: var(--vibeloki-muted);
  font-family: "SF Mono", "Cascadia Code", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0;
}

#user-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  color: var(--vibeloki-muted);
}

#user-tools a,
#user-tools button {
  color: var(--vibeloki-ink);
  text-decoration: none;
}

#user-tools a:hover,
#user-tools button:hover {
  color: var(--vibeloki-red);
}

#logout-form {
  display: inline;
}

#logout-form button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

#nav-sidebar {
  width: 220px;
  border-right: 1px solid var(--vibeloki-line);
  background: rgb(244 247 239 / 65%);
}

#nav-sidebar .module {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#nav-sidebar .module th,
#nav-sidebar .module td {
  border-color: var(--vibeloki-line);
}

#nav-sidebar a {
  color: var(--vibeloki-muted);
}

#nav-sidebar a:hover,
#nav-sidebar .current-app a {
  color: var(--vibeloki-ink);
}

.main {
  min-height: calc(100vh - 72px);
}

.breadcrumbs {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px clamp(18px, 4vw, 48px);
  border: 0;
  background: transparent;
  color: var(--vibeloki-muted);
  font-size: 12px;
}

.breadcrumbs a {
  color: var(--vibeloki-teal);
}

.content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px clamp(18px, 4vw, 48px) 64px;
}

#content h1,
#content h2,
#content h3 {
  color: var(--vibeloki-ink);
  font-family: "Bodoni 72", "Didot", "Georgia", "Songti SC", serif;
  font-weight: 700;
  letter-spacing: 0;
}

#content h1 {
  margin: 0 0 26px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: .98;
}

#content h2 {
  font-size: 27px;
}

.module,
#content-related,
.fieldBox,
.inline-group,
#changelist-filter {
  border: 1px solid var(--vibeloki-line-strong);
  border-radius: var(--vibeloki-radius);
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 18px 50px rgb(22 23 21 / 7%);
}

.module h2,
.module caption,
.module thead th,
#content-related h2,
#content-related h3 {
  background: var(--vibeloki-ink);
  color: var(--vibeloki-white);
}

.module h2,
.module caption,
#content-related h2,
#content-related h3 {
  border-radius: var(--vibeloki-radius) var(--vibeloki-radius) 0 0;
}

.module table,
.module td,
.module th,
.results,
.results th,
.results td {
  border-color: var(--vibeloki-line);
}

.module a,
.object-tools a,
.paginator a,
.actionlist a {
  color: var(--vibeloki-teal);
}

.module a:hover,
.object-tools a:hover,
.paginator a:hover,
.actionlist a:hover {
  color: var(--vibeloki-red);
}

.addlink,
.changelink,
.deletelink,
.viewlink {
  color: var(--vibeloki-teal) !important;
}

input,
textarea,
select {
  border: 1px solid var(--vibeloki-line-strong);
  border-radius: 6px;
  background: var(--vibeloki-white);
  color: var(--vibeloki-ink);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--vibeloki-teal);
}

input[type="submit"],
button[type="submit"],
.submit-row input {
  border: 1px solid var(--vibeloki-ink);
  border-radius: var(--vibeloki-radius);
  background: var(--vibeloki-ink);
  box-shadow: 5px 5px 0 var(--vibeloki-red);
  color: var(--vibeloki-white);
  cursor: pointer;
  font-weight: 800;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.submit-row input:hover {
  background: #2b2d29;
}

.messagelist li {
  border: 1px solid var(--vibeloki-line-strong);
  border-radius: var(--vibeloki-radius);
}

#footer {
  min-height: 32px;
}

@media (max-width: 900px) {
  #nav-sidebar {
    width: 190px;
  }

  .content {
    padding-top: 22px;
  }
}

@media (max-width: 640px) {
  body {
    background-size: 30px 30px, 30px 30px, auto;
  }

  #header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }

  #user-tools {
    width: 100%;
    justify-content: flex-start;
  }

  #nav-sidebar {
    display: none;
  }

  .breadcrumbs {
    padding-top: 12px;
    padding-bottom: 8px;
  }

  .content {
    padding-right: 14px;
    padding-left: 14px;
  }
}