/* Design System interno — tokens e utilitários prefixados para evolução segura. */
:root{
  --sy-bg:var(--bg);
  --sy-surface:var(--surface);
  --sy-surface-2:var(--surface-2);
  --sy-surface-3:var(--surface-3);
  --sy-ink:var(--ink);
  --sy-muted:var(--muted);
  --sy-muted-2:var(--muted-2);
  --sy-line:var(--line);
  --sy-line-soft:var(--line-soft);
  --sy-blue:var(--blue);
  --sy-blue-2:var(--blue-2);
  --sy-pink:var(--pink);
  --sy-danger:var(--danger);
  --sy-warning:var(--warning);
  --sy-success:var(--success);
  --sy-purple:var(--purple);
  --sy-shadow:var(--shadow);
  --sy-shadow-soft:var(--shadow-soft);
  --sy-radius:var(--radius);
  --sy-radius-lg:34px;
  --sy-radius-md:18px;
  --sy-radius-sm:15px;
  --sy-radius-pill:999px;
  --sy-page-max:1420px;
  --sy-space-1:4px;
  --sy-space-2:8px;
  --sy-space-3:12px;
  --sy-space-4:16px;
  --sy-space-5:20px;
  --sy-space-6:24px;
  --sy-space-7:28px;
  --sy-space-8:34px;
  --sy-field-min-height:46px;
  --sy-icon-button:44px;
  --sy-mini-button:40px;
  --sy-font:var(--font);
}

.ds-page{
  width:min(var(--sy-page-max), 100%);
  margin-inline:auto;
}

.ds-card{
  border:1px solid var(--sy-line-soft);
  border-radius:var(--sy-radius);
  background:var(--sy-surface);
  box-shadow:var(--sy-shadow-soft);
}

.ds-card-head{
  padding:24px 26px;
  border-bottom:1px solid color-mix(in srgb,var(--sy-blue) 24%, var(--sy-line-soft));
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb,var(--sy-blue) 14%, transparent), transparent 34%),
    color-mix(in srgb,var(--sy-blue) 7%, var(--sy-surface));
}

.ds-card-head h3,
.ds-card-head h4{
  margin:0;
  color:var(--sy-ink);
  letter-spacing:-.035em;
}

.ds-card-head p{
  margin:7px 0 0;
  color:var(--sy-muted);
  line-height:1.45;
}

.ds-btn{
  min-height:44px;
  border:1px solid var(--sy-line);
  border-radius:var(--sy-radius-pill);
  background:var(--sy-surface);
  color:var(--sy-ink);
  padding:0 18px;
  font:inherit;
  font-weight:850;
  cursor:pointer;
  box-shadow:var(--sy-shadow-soft);
  transition:transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}

.ds-btn:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--sy-blue) 42%, var(--sy-line));
  color:var(--sy-blue);
}

.ds-btn-primary{
  border-color:color-mix(in srgb,var(--sy-blue) 55%, transparent);
  background:var(--sy-blue);
  color:#fff;
}

.ds-icon-btn{
  width:var(--sy-icon-button);
  height:var(--sy-icon-button);
  display:grid;
  place-items:center;
  border:1px solid var(--sy-line-soft);
  border-radius:50%;
  background:var(--sy-surface);
  color:var(--sy-ink);
  box-shadow:var(--sy-shadow-soft);
}

.ds-field{
  display:grid;
  gap:7px;
  color:var(--sy-muted);
  font-size:12px;
  font-weight:750;
}

.ds-field input,
.ds-field select,
.ds-field textarea{
  width:100%;
  min-height:var(--sy-field-min-height);
  border:1px solid var(--sy-line);
  border-radius:var(--sy-radius-sm);
  background:var(--sy-surface-2);
  color:var(--sy-ink);
  padding:12px 13px;
}

.ds-field-error input,
.ds-field-error select,
.ds-field-error textarea{
  border-color:color-mix(in srgb,var(--sy-danger) 68%, var(--sy-line));
  box-shadow:
    0 0 0 4px color-mix(in srgb,var(--sy-danger) 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--sy-danger) 36%, transparent);
}

.ds-field-hint{
  min-height:18px;
  color:var(--sy-danger);
  font-size:12px;
  font-weight:800;
}

.ds-empty{
  display:grid;
  place-items:center;
  min-height:64px;
  border:1px dashed var(--sy-line);
  border-radius:18px;
  color:var(--sy-muted);
  background:var(--sy-surface-2);
  text-align:center;
}

.ds-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:0 12px;
  border-radius:var(--sy-radius-pill);
  border:1px solid var(--sy-line);
  font-size:12px;
  font-weight:850;
}

.ds-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
}

.ds-status-success{color:var(--sy-success)}
.ds-status-warning{color:var(--sy-warning)}
.ds-status-danger{color:var(--sy-danger)}
.ds-status-info{color:var(--sy-blue)}
.ds-status-muted{color:var(--sy-muted)}

.ds-grid-4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sy-space-4);
}

.ds-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sy-space-4);
}

.ds-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sy-space-4);
}

@media (max-width:1120px){
  .ds-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  .ds-grid-4,
  .ds-grid-3,
  .ds-grid-2{grid-template-columns:1fr}
}