body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f6f8fb;
    color: #1f2937;
}

/* Layout */
.container {
    max-width: 1200px;
    margin: auto;
    padding: 32px 20px;
}

/* Hero */
.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.h1 {
    font-size: 2.2rem;
    margin-bottom: 8px;
}

.sub {
    color: #4b5563;
}

.pill {
    display: inline-block;
    background: #e5edff;
    color: #1d4ed8;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin-right: 6px;
}

/* Cards */
.panel {
    margin-bottom: 24px;
}

.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.type-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    text-align: center;
    transition: 0.2s;
}

.type-card.is-active,
.type-card:hover {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb33;
}

/* Workarea */
.workarea {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
}

.field input,
.field textarea {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 16px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.btn--primary {
    background: #2563eb;
    color: #fff;
    border: none;
}

.btn--primary:hover {
    background: #1e40af;
}

.btn--ghost {
    border: 1px solid #d1d5db;
    color: #374151;
}

/* Donation */
.donation {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed #d1d5db;
}

.muted {
    font-size: 13px;
    color: #6b7280;
}

/* Footer */
.site-footer {
    margin-top: 40px;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #6b7280;
}

.extras {
  display: grid;
  gap: 10px;
}

.extra-row{
  display: grid;
  grid-template-columns: 160px 1fr 120px;
  gap: 10px;
  align-items: center;
}

.extra-row select,
.extra-row input{
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
}

@media (max-width: 720px){
  .extra-row{
    grid-template-columns: 1fr;
  }
}
/* ===== Mobile friendly patches ===== */
.container { max-width: 1100px; }

.workarea{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
}

/* Tipos: permitir scroll horizontal no mobile */
.type-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.type-grid::-webkit-scrollbar{height:6px}
.type-grid::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px}

/* Cards: evitar quebra feia */
.card{ width: 100%; }
.card--side{ height: fit-content; }

/* Botões: full width no mobile */
.btn{ white-space: nowrap; }

/* ===== Breakpoints ===== */
@media (max-width: 992px){
  .workarea{ grid-template-columns: 1fr; }
  .type-grid{ grid-template-columns: repeat(10, minmax(150px, 1fr)); }
}

@media (max-width: 520px){
  .topbar{ flex-direction: column; align-items: flex-start !important; }
  .actions{ width: 100%; justify-content: flex-start !important; }
}