.sm-wrap {
  margin-top: 20px;
}

.sm-frontend-dashboard {
  margin: 24px 0;
}

.sm-mobile-shell {
  max-width: 1080px;
}

.sm-mobile-hero {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.sm-mobile-hero h1 {
  margin: 4px 0 8px;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.1;
}

.sm-mobile-hero p {
  margin: 0;
  color: #50575e;
}

.sm-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #3858e9;
}

.sm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 20px 0 24px;
}

.sm-cards--compact {
  margin: 0;
}

.sm-card,
.sm-panel {
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.sm-card {
  padding: 18px;
}

.sm-card h2,
.sm-panel h2,
.sm-panel h3 {
  margin-top: 0;
}

.sm-card h2 {
  margin-bottom: 10px;
  font-size: 14px;
  color: #50575e;
}

.sm-card-number {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: #1d2327;
}

.sm-card-alert {
  color: #b32d2e;
}

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

.sm-grid-2 {
  grid-template-columns: minmax(320px, 420px) 1fr;
  align-items: start;
}

.sm-panel {
  padding: 20px;
}

.sm-mobile-section {
  margin-bottom: 18px;
}

.sm-section-heading {
  margin-bottom: 16px;
}

.sm-section-heading h2,
.sm-section-heading h3 {
  margin-bottom: 6px;
}

.sm-section-heading p {
  margin: 0;
  color: #646970;
}

.sm-form select,
.sm-form input[type="text"],
.sm-form input[type="number"],
.sm-form input[type="date"],
.sm-form textarea,
.sm-filter-grid select,
.sm-filter-grid input[type="text"],
.sm-filter-grid input[type="date"],
.sm-filter-grid input[type="number"],
.sm-dashboard-form input[type="text"],
.sm-dashboard-form input[type="number"],
.sm-dashboard-form input[type="date"],
.sm-dashboard-form textarea,
.sm-dashboard-form select {
  width: 100%;
  max-width: 100%;
}

.sm-dashboard-form input[type="text"],
.sm-dashboard-form input[type="number"],
.sm-dashboard-form input[type="date"],
.sm-dashboard-form select,
.sm-dashboard-form textarea,
.sm-filter-grid input,
.sm-filter-grid select {
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 12px;
}

.sm-dashboard-form textarea {
  min-height: 110px;
}

.sm-quick-tools,
.sm-filter-grid,
.sm-dashboard-grid,
.sm-mobile-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.sm-mobile-stack--compact {
  margin-bottom: 12px;
}

.sm-mobile-stack__full {
  grid-column: 1 / -1;
}

.sm-field label,
.sm-filter-grid label,
.sm-dashboard-form label,
.sm-field-group__label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.sm-primary-field,
.sm-primary-field--qty {
  grid-column: 1 / -1;
}

.sm-primary-field input,
.sm-primary-field select,
.sm-primary-field--qty input {
  font-size: 16px;
}

.sm-selected-item-info {
  padding: 14px;
  border: 1px solid #dcdcde;
  background: #f6f7f7;
  border-radius: 14px;
  line-height: 1.5;
}

.sm-selected-item-info__title {
  font-weight: 700;
  margin-bottom: 8px;
}

.sm-selected-item-info__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  font-size: 13px;
}

.sm-selected-item-info__meta span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sm-selected-item-info__meta strong {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #646970;
}

.sm-selected-item-info.is-found {
  background: #ecf7ed;
  border-color: #72aee6;
}

.sm-selected-item-info.is-error {
  background: #fcf0f1;
  border-color: #d63638;
}

.sm-field-group {
  margin: 14px 0;
}

.sm-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sm-choice-chip {
  position: relative;
}

.sm-choice-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sm-choice-chip span {
  display: block;
  padding: 14px 10px;
  border: 1px solid #dcdcde;
  border-radius: 14px;
  text-align: center;
  font-weight: 600;
  background: #fff;
}

.sm-choice-chip input:checked + span {
  border-color: #3858e9;
  background: #eef2ff;
  color: #243cbd;
  box-shadow: inset 0 0 0 1px #3858e9;
}

.sm-disclosure {
  margin-top: 14px;
  border: 1px solid #dcdcde;
  border-radius: 14px;
  background: #fafafa;
  overflow: hidden;
}

.sm-disclosure summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  list-style: none;
}

.sm-disclosure summary::-webkit-details-marker {
  display: none;
}

.sm-disclosure textarea,
.sm-disclosure .sm-mobile-stack {
  margin: 0;
  padding: 0 16px 16px;
}

.sm-form-sticky {
  position: sticky;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(56, 88, 233, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(56, 88, 233, 0.08);
}

.sm-form-sticky p {
  margin: 4px 0 0;
  color: #646970;
  font-size: 13px;
}

.button.button-hero,
.button-block {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 14px;
}

.button-block {
  width: 100%;
  justify-content: center;
}

.sm-toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}

.sm-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #dcdcde;
  border-radius: 14px;
  background: #fff;
}

.sm-switch span {
  font-weight: 600;
}

.sm-quick-action {
  display: block;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid #dcdcde;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.sm-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.sm-quick-action strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.sm-quick-action span {
  display: block;
  color: #646970;
  font-size: 13px;
}

.sm-inline-form + .sm-inline-form {
  margin-top: 16px;
}

.sm-top-sep {
  padding-top: 16px;
  border-top: 1px dashed #dcdcde;
}

.sm-frontend-notice {
  padding: 14px 16px;
  border-radius: 14px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}

.sm-frontend-notice.success {
  background: #ecf7ed;
  color: #185c37;
  border-color: #72aee6;
}

.sm-frontend-notice.error {
  background: #fcf0f1;
  color: #8a2424;
  border-color: #d63638;
}

.sm-dashboard-table-wrap {
  overflow-x: auto;
}

.sm-dashboard-table-wrap table {
  width: 100%;
}

.sm-item-title {
  font-weight: 600;
}

.sm-item-meta-inline {
  margin-top: 6px;
  font-size: 12px;
  color: #50575e;
  line-height: 1.6;
}

.sm-record-list {
  display: grid;
  gap: 12px;
}

.sm-record-card {
  border: 1px solid #e2e4e7;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}

.sm-record-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.sm-record-card__head h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}

.sm-record-card__subline {
  margin: 4px 0 0;
  color: #646970;
  font-size: 13px;
}

.sm-record-card__body {
  display: grid;
  gap: 12px;
}

.sm-record-card__body.has-image {
  grid-template-columns: 88px 1fr;
  align-items: start;
}

.sm-record-card__thumb img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #dcdcde;
  background: #f6f7f7;
}

.sm-record-meta {
  display: grid;
  gap: 8px;
  color: #1d2327;
  font-size: 14px;
}

.sm-record-meta strong {
  margin-right: 4px;
}

.sm-record-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #f0f6fc;
  color: #1d4ed8;
}

.sm-badge.warn {
  background: #fff4e5;
  color: #8a4b00;
}

.sm-badge.danger {
  background: #fcf0f1;
  color: #b32d2e;
}

.sm-badge.ok {
  background: #ecf7ed;
  color: #185c37;
}

.sm-frontend-image-panel {
  margin: 18px 0;
  padding: 16px;
  border: 1px dashed #c3c4c7;
  border-radius: 14px;
  background: #f8f9fa;
}

.sm-image-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.sm-image-picker__preview {
  width: 140px;
  min-height: 140px;
  border: 1px solid #dcdcde;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #646970;
  padding: 8px;
}

.sm-image-picker__preview img {
  max-width: 100%;
  max-height: 220px;
  display: block;
  border-radius: 10px;
}

.sm-image-picker__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
}

.sm-builder-shell {
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  background: #f8f9fb;
  border: 1px solid #e2e4e7;
}

.sm-builder-shell__head h3 {
  margin: 0 0 4px;
}

.sm-builder-shell__head p {
  margin: 0 0 12px;
  color: #646970;
}

.sm-request-builder-list {
  display: grid;
  gap: 12px;
}

.sm-request-line {
  border: 1px solid #dcdcde;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.sm-request-line__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sm-request-line__head h4 {
  margin: 0;
  font-size: 15px;
}

.sm-request-line__head p {
  margin: 3px 0 0;
  color: #646970;
  font-size: 13px;
}

.sm-request-line__body {
  display: grid;
  grid-template-columns: minmax(100px, 130px) 1fr;
  gap: 12px;
  align-items: end;
}

.sm-request-line__body label span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #646970;
  text-transform: uppercase;
}

.sm-request-line__meta {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f7f7;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.sm-request-row-qty {
  width: 100%;
  min-height: 46px;
}

.sm-empty-state {
  padding: 20px 16px;
  text-align: center;
  border: 1px dashed #c3c4c7;
  border-radius: 14px;
  color: #646970;
  background: #fff;
}

@media (max-width: 960px) {
  .sm-grid-2,
  .sm-quick-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 782px) {
  .sm-mobile-stack,
  .sm-dashboard-grid,
  .sm-quick-tools,
  .sm-filter-grid,
  .sm-toggle-row,
  .sm-choice-grid,
  .sm-selected-item-info__meta,
  .sm-request-line__body {
    grid-template-columns: 1fr;
  }

  .sm-form-sticky,
  .sm-record-card__head,
  .sm-request-line__head {
    flex-direction: column;
    align-items: stretch;
  }

  .sm-form-sticky .button,
  .sm-image-picker__actions,
  .sm-image-picker__preview,
  .sm-record-card__body.has-image {
    width: 100%;
  }

  .sm-record-card__body.has-image {
    grid-template-columns: 1fr;
  }

  .sm-record-card__thumb img {
    width: 100%;
    height: auto;
    max-height: 220px;
  }

  .sm-panel,
  .sm-card {
    border-radius: 14px;
  }
}