:root {
  --ink: #1c1915;
  --wood: #6b4b32;
  --wood-dark: #3d2b1f;
  --brass: #b08958;
  --paper: #f6f1e8;
  --card: #fffdf9;
  --line: #e6dccb;
  --ok: #2f6b4f;
}
html, body { background: var(--paper); color: var(--ink); }
body {
  font-family: "Segoe UI", "Avenir Next", sans-serif;
  min-height: 100vh;
}
.app-nav {
  background: var(--wood-dark);
  color: #f6f1e8;
  box-shadow: 0 8px 24px rgba(61,43,31,.18);
}
.app-nav .navbar-brand { color: #fff; letter-spacing: .02em; }
.app-nav .nav-link, .app-nav .btn-nav {
  color: #f6f1e8;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .35rem .8rem;
  font-size: .92rem;
}
.app-nav .nav-link:hover, .app-nav .btn-nav:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(176,137,88,.45);
}
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-grid; place-items: center;
  background: var(--brass); color: var(--wood-dark); margin-right: .55rem;
}
.card, .table, .modal-content {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(61,43,31,.05);
}
.btn-primary, .btn-dark {
  background: var(--wood-dark); border-color: var(--wood-dark);
}
.btn-primary:hover, .btn-dark:hover { background: var(--wood); border-color: var(--wood); }
.btn-outline-primary, .btn-outline-dark, .btn-outline-secondary {
  color: var(--wood-dark); border-color: var(--brass);
}
.form-control, .form-select {
  border-radius: 12px; border-color: var(--line); background: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brass); box-shadow: 0 0 0 .2rem rgba(176,137,88,.25);
}
h1, h2, .navbar-brand { font-weight: 650; }
.page-wrap { padding: 1.4rem 0 3rem; }
.hero {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center;
  padding: 3.5rem 0 2rem;
}
.hero h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.05; }
.kicker { color: var(--wood); letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; font-weight: 700; }
.feature {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.15rem;
}
.feature i { color: var(--wood); font-size: 1.4rem; }
.login-card { border-radius: 22px; padding: 1.4rem; background: #fffdf9; border: 1px solid var(--line); }
.site-footer { color: #8a7b6a; font-size: .85rem; padding: 1.5rem 0 2rem; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 2rem; } }