:root{
  --bark:#161C17;
  --bark-2:#1D241E;
  --parchment:#F2EEE3;
  --heartwood:#C08A3E;
  --moss:#6B7F5E;
  --line-on-dark: rgba(242,238,227,0.14);
}
*{ box-sizing:border-box; }
body{
  margin:0;
  background: var(--bark);
  color: var(--parchment);
  font-family: 'Work Sans', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a{ color: var(--heartwood); }
.wrap{ max-width: 720px; margin: 0 auto; padding: 0 28px; }

nav{
  border-bottom: 1px solid var(--line-on-dark);
  padding: 18px 0;
}
nav .wrap{ display:flex; justify-content:space-between; align-items:center; max-width: 900px; }
.wordmark{ font-family:'Fraunces', Georgia, serif; font-size:19px; text-decoration:none; color: var(--parchment); }
.wordmark span{ color: var(--heartwood); }
.nav-links{ display:flex; gap:22px; font-size:14px; }
.nav-links a{ text-decoration:none; color: rgba(242,238,227,0.7); }
.nav-links a:hover, .nav-links a.active{ color: var(--heartwood); }

main{ padding: 64px 0; }
h1{ font-family:'Fraunces', Georgia, serif; font-weight:500; font-size: 30px; margin: 0 0 8px; }
p.subtle{ color: rgba(242,238,227,0.65); margin: 0 0 32px; }

.card{
  background: var(--bark-2);
  border: 1px solid var(--line-on-dark);
  border-radius: 4px;
  padding: 32px;
}

label{ display:block; font-size:13px; letter-spacing:0.03em; margin-bottom:6px; color: rgba(242,238,227,0.7); }
input[type="text"], input[type="password"], input[type="file"], select{
  width:100%;
  background: var(--bark);
  border: 1px solid var(--line-on-dark);
  color: var(--parchment);
  padding: 11px 13px;
  border-radius: 3px;
  font-size: 15px;
  margin-bottom: 20px;
}
input:focus, select:focus{ outline: 2px solid var(--heartwood); outline-offset: 1px; }

button, .btn{
  display:inline-block;
  background: var(--heartwood);
  color: var(--bark);
  border: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover{ opacity: 0.92; }
.btn-quiet{
  background: transparent;
  border: 1px solid var(--line-on-dark);
  color: var(--parchment);
}

.error{
  background: rgba(200,90,60,0.12);
  border: 1px solid rgba(200,90,60,0.4);
  color: #E8B4A3;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14.5px;
  margin-bottom: 22px;
}
.success{
  background: rgba(107,127,94,0.15);
  border: 1px solid var(--moss);
  color: #C9D6C2;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14.5px;
  margin-bottom: 22px;
}

table{ width:100%; border-collapse: collapse; }
th, td{ text-align:left; padding: 12px 10px; border-bottom: 1px solid var(--line-on-dark); font-size: 14.5px; }
th{ color: rgba(242,238,227,0.55); font-weight:500; font-size:12.5px; text-transform:uppercase; letter-spacing:0.04em; }
.empty-state{ color: rgba(242,238,227,0.5); padding: 30px 0; text-align:center; }

footer{ padding: 30px 0; border-top: 1px solid var(--line-on-dark); text-align:center; font-size:12.5px; color: rgba(242,238,227,0.4); }