@font-face {
  font-family: 'Vazirmatn';
  src:
    local('Vazirmatn Regular'),
    local('Vazirmatn'),
    url('/assets/fonts/vazirmatn-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src:
    local('Vazirmatn Medium'),
    local('Vazirmatn'),
    url('/assets/fonts/vazirmatn-medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src:
    local('Vazirmatn SemiBold'),
    local('Vazirmatn'),
    url('/assets/fonts/vazirmatn-semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src:
    local('Vazirmatn Bold'),
    local('Vazirmatn'),
    url('/assets/fonts/vazirmatn-bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src:
    local('Vazirmatn ExtraBold'),
    local('Vazirmatn'),
    url('/assets/fonts/vazirmatn-extrabold.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --font-fa: 'Vazirmatn', sans-serif;
  --font-en: 'Manrope', 'Vazirmatn', sans-serif;

  --ds-bg: #f5f6f8;
  --ds-bg-soft: #fbfbfc;
  --ds-surface: #ffffff;
  --ds-surface-raised: #ffffff;
  --ds-surface-subtle: #f3f5f8;
  --ds-line: #e4e8f0;
  --ds-text: #202434;
  --ds-text-soft: #5f6678;
  --ds-text-faint: #8b93a8;

  --ds-primary: #dd5b4e;
  --ds-primary-strong: #c4453a;
  --ds-primary-soft: #fdebea;
  --ds-secondary: #4f7fe7;
  --ds-success: #1f9d6e;
  --ds-warning: #d58a20;
  --ds-danger: #d9444a;
  --ds-info: #5078d1;

  --ds-radius-sm: 10px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 18px;
  --ds-radius-xl: 24px;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;

  --ds-shadow-1: 0 2px 8px rgba(28, 38, 59, 0.06);
  --ds-shadow-2: 0 10px 30px rgba(28, 38, 59, 0.1);
  --ds-shadow-focus: 0 0 0 3px rgba(79, 127, 231, 0.22);

  --ds-transition: 180ms ease;

  --ds-sidebar-w: 240px;
  --ds-max: 1600px;
}

:root[data-theme='dark'] {
  --ds-bg: #11141a;
  --ds-bg-soft: #171c24;
  --ds-surface: #1b212b;
  --ds-surface-raised: #202938;
  --ds-surface-subtle: #263244;
  --ds-line: #313e53;
  --ds-text: #edf1f8;
  --ds-text-soft: #b6bfd1;
  --ds-text-faint: #8d98b0;

  --ds-primary: #ff7d6e;
  --ds-primary-strong: #f06352;
  --ds-primary-soft: #3b2526;
  --ds-secondary: #75a2ff;
  --ds-success: #39c08d;
  --ds-warning: #f1ad4f;
  --ds-danger: #ff6b6b;
  --ds-info: #8eb4ff;

  --ds-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.28);
  --ds-shadow-2: 0 16px 40px rgba(0, 0, 0, 0.32);
  --ds-shadow-focus: 0 0 0 3px rgba(117, 162, 255, 0.25);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body.ds-body {
  font-family: var(--font-en);
  color: var(--ds-text);
  background:
    radial-gradient(circle at 6% 0%, rgba(221, 91, 78, 0.15), transparent 24%),
    radial-gradient(circle at 94% 0%, rgba(80, 120, 209, 0.13), transparent 24%),
    var(--ds-bg);
}

html[dir='rtl'] body.ds-body {
  font-family: var(--font-fa);
}

html[lang='fa'] body.ds-body {
  font-family: var(--font-fa);
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

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

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

.ds-reveal {
  animation: ds-fade-up 240ms var(--ds-transition);
}

@keyframes ds-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ds-text-soft {
  color: var(--ds-text-soft);
}

.ds-text-faint {
  color: var(--ds-text-faint);
}

.ds-overline {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-text-faint);
}

.ds-display {
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ds-title-lg {
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.ds-title-md {
  font-size: 1.08rem;
  line-height: 1.3;
}

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0 10px;
  font-size: 0.76rem;
  font-weight: 700;
}

.ds-chip--neutral {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-line);
  color: var(--ds-text-soft);
}

.ds-chip--test {
  background: #fbeed8;
  color: #996013;
}

.ds-chip--prod {
  background: #d8f6e9;
  color: #1f734f;
}

:root[data-theme='dark'] .ds-chip--test {
  background: #4a3824;
  color: #f2c27b;
}

:root[data-theme='dark'] .ds-chip--prod {
  background: #224437;
  color: #79dfb5;
}

.ds-btn {
  border: 1px solid var(--ds-line);
  border-radius: 11px;
  min-height: 38px;
  padding: 0 12px;
  background: var(--ds-surface);
  color: var(--ds-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    border-color var(--ds-transition),
    transform var(--ds-transition),
    box-shadow var(--ds-transition),
    background-color var(--ds-transition);
}

.ds-btn:hover {
  border-color: color-mix(in srgb, var(--ds-secondary) 38%, var(--ds-line));
}

.ds-btn:focus-visible,
.ds-field-input:focus-visible,
.ds-field-select:focus-visible,
.ds-nav-item:focus-visible,
.ds-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.ds-btn:active {
  transform: translateY(1px);
}

.ds-btn--primary {
  background: linear-gradient(135deg, var(--ds-primary), var(--ds-primary-strong));
  border-color: transparent;
  color: #ffffff;
  font-weight: 700;
}

.ds-btn--ghost {
  background: transparent;
}

.ds-btn--soft {
  background: var(--ds-surface-subtle);
}

.ds-btn--danger {
  color: var(--ds-danger);
}

.ds-icon-btn {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 11px;
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--ds-transition);
}

.ds-icon-btn:hover {
  border-color: color-mix(in srgb, var(--ds-secondary) 40%, var(--ds-line));
}

.ds-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
}

.ds-icon--3d {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.ds-badge {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-end: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--ds-surface);
  background: var(--ds-danger);
  color: #fff;
  font-size: 0.64rem;
  line-height: 14px;
  text-align: center;
  padding: 0 4px;
}

.ds-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 11px;
  border: 1px solid var(--ds-line);
  background: var(--ds-surface-subtle);
  padding: 2px;
}

.ds-lang button {
  border: 0;
  background: transparent;
  color: var(--ds-text-faint);
  border-radius: 9px;
  min-height: 30px;
  min-width: 38px;
  padding: 0 10px;
  cursor: pointer;
  font-weight: 700;
}

.ds-lang button.is-active {
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-1);
}

.ds-menu-anchor {
  position: relative;
}

.ds-dropdown {
  position: absolute;
  z-index: 30;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 8px);
  width: min(300px, 92vw);
  border-radius: 12px;
  border: 1px solid var(--ds-line);
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-2);
  padding: 8px;
  animation: ds-fade-up 150ms var(--ds-transition);
}

.ds-dropdown[hidden] {
  display: none;
}

.ds-dropdown-title {
  padding: 4px 8px 8px;
  font-size: 0.78rem;
  color: var(--ds-text-faint);
}

.ds-dropdown-item {
  width: 100%;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ds-text);
  text-align: start;
  padding: 0 10px;
  cursor: pointer;
}

.ds-dropdown-item:hover {
  background: var(--ds-surface-subtle);
}

.ds-dropdown-item.is-active {
  border-color: color-mix(in srgb, var(--ds-primary) 35%, var(--ds-line));
  color: var(--ds-primary-strong);
  font-weight: 700;
}

.ds-dropdown-item--danger {
  color: var(--ds-danger);
}

.ds-switch {
  position: relative;
  display: inline-flex;
}

.ds-switch input {
  position: absolute;
  opacity: 0;
}

.ds-switch-ui {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--ds-line);
  background: #c8cfdb;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: var(--ds-transition);
}

.ds-switch-ui::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform: translateX(0);
  transition: var(--ds-transition);
}

.ds-switch input:checked + .ds-switch-ui {
  background: var(--ds-primary);
  border-color: var(--ds-primary-strong);
}

.ds-switch input:checked + .ds-switch-ui::before {
  transform: translateX(18px);
}

html[dir='rtl'] .ds-switch input:checked + .ds-switch-ui::before {
  transform: translateX(-18px);
}

.ds-app {
  display: grid;
  grid-template-columns: var(--ds-sidebar-w) 1fr;
  gap: 12px;
}

.ds-sidebar {
  padding: 14px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.ds-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
}

.ds-brand-badge {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--ds-primary), var(--ds-primary-strong));
  color: #fff;
  font-weight: 800;
}

.ds-brand-copy {
  display: grid;
  gap: 1px;
}

.ds-brand-copy strong {
  font-size: 1.02rem;
}

.ds-brand-copy span {
  font-size: 0.78rem;
  color: var(--ds-text-soft);
}

.ds-nav {
  display: grid;
  gap: 5px;
}

.ds-nav-item {
  border: 1px solid transparent;
  border-radius: 11px;
  min-height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: start;
  cursor: pointer;
  color: var(--ds-text-soft);
  background: transparent;
  transition: var(--ds-transition);
}

.ds-nav-item:hover {
  background: var(--ds-surface-subtle);
  color: var(--ds-text);
}

.ds-nav-item.is-active {
  background: var(--ds-primary-soft);
  border-color: color-mix(in srgb, var(--ds-primary) 34%, var(--ds-line));
  color: var(--ds-primary-strong);
  font-weight: 700;
}

.ds-mode-tile {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--ds-line);
  border-radius: 11px;
  background: var(--ds-surface-subtle);
  padding: 10px;
  color: var(--ds-text-soft);
}

.ds-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.ds-env-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #f3d5a8;
  background: #fdf1dd;
  color: #7d5118;
  border-radius: 12px;
  padding: 11px 13px;
}

.ds-env-banner.ds-env-banner--production {
  border-color: #b3dfc8;
  background: #e1f8ee;
  color: #1e6f53;
}

:root[data-theme='dark'] .ds-env-banner {
  background: #3c2e22;
  border-color: #6e4b2b;
  color: #f4c98c;
}

:root[data-theme='dark'] .ds-env-banner.ds-env-banner--production {
  background: #1f3a31;
  border-color: #2b6a53;
  color: #88e2bc;
}

.ds-topbar {
  padding: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ds-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ds-account-btn {
  border: 1px solid var(--ds-line);
  border-radius: 11px;
  min-height: 38px;
  background: var(--ds-surface);
  color: var(--ds-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  cursor: pointer;
}

.ds-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ds-primary-soft);
  color: var(--ds-primary-strong);
  font-size: 0.72rem;
  font-weight: 800;
}

.ds-content-grid {
  display: grid;
  gap: 12px;
}

.ds-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ds-kpi-card {
  padding: 14px;
  display: grid;
  gap: 6px;
  background: var(--ds-surface-raised);
}

.ds-kpi-value {
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.ds-kpi-meta {
  font-size: 0.8rem;
  color: var(--ds-text-faint);
}

.ds-grid-2 {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 12px;
}

.ds-grid-2-equal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ds-card {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.ds-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ds-callout {
  background: linear-gradient(130deg, rgba(79, 127, 231, 0.14), rgba(125, 159, 233, 0.08));
}

.ds-callout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ds-callout-link {
  border: 1px solid var(--ds-line);
  border-radius: 11px;
  background: var(--ds-surface);
  text-decoration: none;
  padding: 10px;
  display: grid;
  gap: 5px;
}

.ds-callout-link:hover {
  border-color: color-mix(in srgb, var(--ds-secondary) 36%, var(--ds-line));
}

.ds-wallet-amount {
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.ds-trend-chart {
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  background: var(--ds-surface-subtle);
  min-height: 220px;
  padding: 12px;
}

.ds-trend-svg {
  width: 100%;
  height: 170px;
}

.ds-trend-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ds-text-faint);
  font-size: 0.8rem;
}

.ds-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ds-list-item {
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  background: var(--ds-surface-subtle);
  padding: 10px;
  display: grid;
  gap: 5px;
}

.ds-list-item small {
  color: var(--ds-text-faint);
}

.ds-alert-list {
  display: grid;
  gap: 8px;
}

.ds-alert {
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  padding: 10px;
  background: var(--ds-surface-subtle);
  display: grid;
  gap: 4px;
}

.ds-alert .level {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ds-alert[data-level='info'] .level {
  color: var(--ds-info);
}

.ds-alert[data-level='warning'] .level {
  color: var(--ds-warning);
}

.ds-alert[data-level='critical'] .level {
  color: var(--ds-danger);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.ds-table thead th {
  text-align: start;
  color: var(--ds-text-faint);
  font-weight: 600;
  border-bottom: 1px solid var(--ds-line);
  padding: 8px 6px;
}

.ds-table tbody td {
  border-bottom: 1px solid var(--ds-line);
  padding: 8px 6px;
}

.ds-status-pill {
  min-height: 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
}

.ds-status-pill[data-status='completed'] {
  background: #daf6ea;
  color: #1a7a53;
}

.ds-status-pill[data-status='pending'] {
  background: #fdf0d7;
  color: #9a681d;
}

.ds-status-pill[data-status='failed'] {
  background: #fde1e3;
  color: #b7353d;
}

.ds-status-pill[data-status='refunded'] {
  background: #e5e8f2;
  color: #5c6781;
}

:root[data-theme='dark'] .ds-status-pill[data-status='completed'] {
  background: #224536;
  color: #8ae2bb;
}

:root[data-theme='dark'] .ds-status-pill[data-status='pending'] {
  background: #4b3b27;
  color: #efc889;
}

:root[data-theme='dark'] .ds-status-pill[data-status='failed'] {
  background: #4d262a;
  color: #ff979e;
}

:root[data-theme='dark'] .ds-status-pill[data-status='refunded'] {
  background: #2e3647;
  color: #acb8d0;
}

.ds-empty {
  border: 1px dashed var(--ds-line);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  color: var(--ds-text-faint);
}

.ds-inline-message {
  min-height: 18px;
  font-size: 0.84rem;
  color: var(--ds-text-soft);
}

.ds-inline-message.is-error {
  color: var(--ds-danger);
}

.ds-inline-message.is-success {
  color: var(--ds-success);
}

.ds-footer-note {
  font-size: 0.8rem;
  color: var(--ds-text-faint);
}

.ds-login-layout {
  width: min(1120px, calc(100% - 24px));
  margin: 20px auto;
  min-height: min(710px, calc(100dvh - 40px));
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-2);
}

.ds-login-hero {
  position: relative;
  background:
    radial-gradient(circle at 5% 10%, rgba(255, 125, 110, 0.26), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(79, 127, 231, 0.24), transparent 32%),
    linear-gradient(145deg, #182236, #1c2d49 62%, #20385c);
  color: #f5f7ff;
  padding: 36px;
  display: grid;
  align-content: space-between;
  gap: 16px;
}

.ds-login-hero::after {
  content: '';
  position: absolute;
  inset-inline-end: -80px;
  inset-block-end: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.32), transparent 68%);
}

.ds-login-hero p {
  max-width: 36ch;
  color: rgba(245, 247, 255, 0.82);
  line-height: 1.7;
}

.ds-login-panel {
  padding: 30px;
  display: grid;
  align-content: center;
  gap: 12px;
  background: var(--ds-surface);
}

.ds-field {
  display: grid;
  gap: 6px;
}

.ds-field label {
  color: var(--ds-text-soft);
  font-size: 0.86rem;
}

.ds-field-input,
.ds-field-select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--ds-line);
  border-radius: 11px;
  background: var(--ds-surface);
  color: var(--ds-text);
  padding: 0 12px;
}

.ds-form {
  display: grid;
  gap: 12px;
}

.ds-auth-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ds-hide-desktop {
  display: none;
}

@media (max-width: 1280px) {
  .ds-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-grid-2,
  .ds-grid-2-equal {
    grid-template-columns: 1fr;
  }

  .ds-callout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .ds-app {
    grid-template-columns: 1fr;
  }

  .ds-sidebar {
    padding-bottom: 10px;
  }

  .ds-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ds-nav-item {
    justify-content: center;
    padding: 0 8px;
  }

  .ds-nav-item span:last-child {
    display: none;
  }

  .ds-mode-tile {
    margin-top: 0;
  }

  .ds-topbar {
    padding: 12px;
  }

  .ds-toolbar-actions {
    width: 100%;
  }

  .ds-login-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ds-login-hero {
    min-height: 280px;
  }
}

@media (max-width: 760px) {
  .ds-page-wrap {
    padding: 8px;
  }

  .ds-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-kpi-grid {
    grid-template-columns: 1fr;
  }

  .ds-toolbar-actions {
    gap: 6px;
  }

  .ds-toolbar-actions .ds-menu-anchor,
  .ds-toolbar-actions .ds-lang {
    flex: 0 0 auto;
  }

  .ds-toolbar-actions .ds-btn,
  .ds-toolbar-actions .ds-account-btn {
    flex: 1 1 auto;
    min-width: 130px;
  }

  .ds-table {
    font-size: 0.8rem;
  }

  .ds-login-panel {
    padding: 18px;
  }

  .ds-hide-mobile {
    display: none;
  }

  .ds-hide-desktop {
    display: inline-flex;
  }
}