/* App compatibility layer on top of site.css */

/* reuse the marketing design but keep existing app wrapper class */
.wrap{
  width: min(var(--max), calc(100% - 32px));
  margin: 26px auto;
  padding: 0;
}

/* your app uses .super.card, marketing uses .card.
   Keep both working and make .super.card wider */
.super.card{
  max-width: 1200px;
}

table th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}
table td{ vertical-align: top; }

/* app pages probably have <button> without .btn */
button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #eaf6f0;
  box-shadow: 4px 4px 0 #1b1b1b;
  font-weight: 800;
  cursor: pointer;
}
button:hover{ transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #1b1b1b; }
button:active{ transform: translate(0,0); box-shadow: 3px 3px 0 #1b1b1b; }

/* app errors */
.error{
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #fff1f1;
}

/* muted helper */
.muted{ font-size: 13px; color: var(--muted); }

/* inputs already styled in site.css, keep sizing comfy */
input, select, textarea{ font-size: 14px; }