@font-face {
  font-family: "Poppins";
  src: url("poppins-bold.ttf") format("truetype");
  font-weight: 700 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("inter-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --g: #23512f;
  --d: #183921;
  --raised: #316a40;
  --y: #ffc300;
  --r: #e10600;
  --paper: #fffdf7;
  --ink: #183921;
  --muted: #5f6b7a;
  --line: #d7e2da;
  --soft: #edf3ef;
}

body,
button,
input,
select,
textarea {
  font-family: "Inter", "Segoe UI", sans-serif;
}

body { background: var(--soft); }

.login {
  background:
    radial-gradient(circle at 18% 16%, rgba(49, 106, 64, .92), transparent 34%),
    linear-gradient(145deg, var(--d), var(--g) 58%, #20462d);
}

.login > section {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(24, 57, 33, .9);
  box-shadow: 0 30px 100px rgba(8, 30, 17, .38);
}

.login img { width: 126px; height: 126px; }
.login h1,
.brand strong,
.motto,
.topbar h1,
.stat strong { font-family: "Poppins", "Arial Black", sans-serif; }

.login h1 { letter-spacing: -.035em; }
.login a { color: var(--d); background: var(--paper); }

.sidebar {
  background:
    linear-gradient(180deg, rgba(49, 106, 64, .35), transparent 32%),
    var(--g);
}

.brand img { width: 54px; height: 54px; }
.brand strong { font-size: 19px; letter-spacing: .04em; }
.brand small { color: var(--y); }

.nav { color: var(--d); background: var(--y); }
.nav b {
  width: 29px;
  height: 29px;
  clip-path: none;
  border-radius: 0;
  background: url("logo.png") center/contain no-repeat;
}

.workspace { background: var(--soft); }
.topbar h1 { font-size: 34px; }
.panel,
.stat,
.suggestion-panel { background: var(--paper); }
.stat.accent { background: var(--g); }
.stat::after {
  content: "";
  right: 8px;
  bottom: -8px;
  width: 104px;
  height: 104px;
  opacity: .07;
  background: url("arch-transparent.png") center/contain no-repeat;
}
.stat.accent::after { opacity: .14; }

.mini.brand-fallback {
  padding: 6px;
  object-fit: contain;
  background: var(--g);
}

.filters input,
.filters select,
.drawer input,
.drawer select,
.drawer textarea { background: #fff; }

.filters input:focus,
.filters select:focus,
.drawer input:focus,
.drawer select:focus,
.drawer textarea:focus {
  border-color: var(--g);
  box-shadow: 0 0 0 3px rgba(35, 81, 47, .12);
}

.drawer { background: var(--soft); }
.drawer > header { background: var(--g); }
.primary { color: var(--d); background: var(--y); }

.empty > b {
  width: 72px;
  height: 72px;
  clip-path: none;
  font-size: 0;
  background: url("logo.png") center/contain no-repeat;
}

.suggestion-panel h2,
.suggestion-item h3,
.suggestion-item a { color: var(--g); }
.suggestion-panel > header > strong,
.suggestion-actions .approve { color: var(--d); background: var(--y); border-color: var(--y); }
.suggestion-actions .reject { color: var(--r); }

@media (max-width: 760px) {
  .sidebar { background: var(--g); }
  .brand img { width: 48px; height: 48px; }
}