.mat-portal { max-width: 960px; margin: 0 auto; }
.mat-portal__head { margin-bottom: 1rem; }
.mat-portal__head h1 { margin: 0 0 0.35rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.mat-portal__sub { color: #5b6577; margin: 0; }
.mat-portal__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem;
}
.mat-portal__nav a {
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid #e4e7ee;
  background: #fff;
  color: #121826;
  font-size: 0.92rem;
}
.mat-portal__nav a.is-active {
  background: #0b1220;
  color: #fff;
  border-color: #0b1220;
}
.mat-portal__search {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.mat-portal__search input,
.mat-portal__search select {
  border: 1px solid #e4e7ee;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
}
.mat-portal__table-wrap { overflow-x: auto; background: #fff; border-radius: 12px; border: 1px solid #e4e7ee; }
.mat-portal__table { width: 100%; border-collapse: collapse; }
.mat-portal__table th,
.mat-portal__table td { padding: 0.7rem 0.8rem; border-bottom: 1px solid #eef1f6; text-align: start; }
.mat-portal__table th { background: #0b1220; color: #fff; font-weight: 600; }
.mat-portal__panel {
  background: #fff;
  border: 1px solid #e4e7ee;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}
.mat-portal__timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.mat-portal__timeline li { border-inline-start: 3px solid #e2b13c; padding-inline-start: 0.75rem; }
.mat-portal__timeline span { display: block; color: #5b6577; font-size: 0.85rem; }
.mat-portal__msg { background: #f8fafc; border-radius: 10px; padding: 0.75rem; margin-bottom: 0.5rem; }
.mat-portal__quote {
  background: #fff;
  border: 1px solid #e4e7ee;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.mat-portal__quote-actions { margin-top: 0.75rem; }
.mat-portal__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.mat-portal__notes li { background: #fff; border: 1px solid #e4e7ee; border-radius: 12px; padding: 0.85rem 1rem; }
.mat-portal__notes small { display: block; color: #5b6577; margin-top: 0.25rem; }
.mat-portal__empty { color: #5b6577; }
.mat-portal__progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.mat-portal__progress li {
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  border-inline-start: 3px solid #cbd5e1;
}
.mat-portal__progress li.is-done {
  background: #ecfdf5;
  color: #166534;
  border-inline-start-color: #22c55e;
}
.mat-portal__progress li.is-current {
  background: #0b1220;
  color: #fff;
  border-inline-start-color: #e2b13c;
  font-weight: 700;
}
.mat-portal-magic {
  background: #fff;
  border: 1px solid #e4e7ee;
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  max-width: 520px;
}
.mat-portal-magic__form { display: grid; gap: 0.75rem; }
.mat-status-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: #eef2ff;
}
.mat-portal__progress-bar {
  height: 10px;
  background: #e8ecf3;
  border-radius: 999px;
  overflow: hidden;
  margin: 0.75rem 0 0.35rem;
}
.mat-portal__progress-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0b1220, #e2b13c);
  border-radius: 999px;
  transition: width 0.35s ease;
}
.mat-portal__progress-pct { margin: 0 0 0.75rem; font-size: 0.95rem; }
.mat-portal__ship-card {
  background: #f8fafc;
  border: 1px solid #e4e7ee;
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
}
.mat-portal__ship-meta { margin: 0.5rem 0 0.75rem; padding-inline-start: 1.1em; }
.mat-portal__ship-meta li { margin-bottom: 0.25rem; }
.mat-portal__feedback { display: grid; gap: 0.65rem; margin-top: 0.75rem; }
.mat-portal__check { display: flex; align-items: center; gap: 0.5rem; }
.mat-portal__invoice {
  background: #fff;
  border: 1px solid #e4e7ee;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
.mat-portal__invoice h3 { margin: 0 0 0.35rem; }
.mat-portal__invoice h4 { margin: 0.85rem 0 0.35rem; font-size: 0.95rem; }
.mat-portal__pay-hist { margin: 0; padding-inline-start: 1.1em; }
.mat-portal__pay-hist li { margin-bottom: 0.35rem; }
@media (max-width: 720px) {
  .mat-portal__search { grid-template-columns: 1fr; }
  .mat-portal__nav { gap: 0.4rem; }
}