@font-face {
  font-family: 'Source Sans Pro';
  src: url("../fonts/source-sans-pro-v24-cyrillic-400.2b84fe61edc2.woff2") format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url("../fonts/source-sans-pro-v24-cyrillic-700.5fffac32c626.woff2") format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url("../fonts/source-sans-pro-v24-latin-400.33005609bb16.woff2") format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url("../fonts/source-sans-pro-v24-latin-700.7424e798b17c.woff2") format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --text: #151c26;
  --muted: #526071;
  --line: #e2e7ee;
  --blue: #1259bc;
  --soft-blue: #e7f1ff;
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  color: var(--text);
  background: #f3f5f8;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.app {
  width: min(100%, 600px);
  min-height: 100dvh;
  margin-inline: auto;
  padding: 24px max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: #fff;
}
h1 { margin: 0 0 20px; font-size: 32px; line-height: 1.12; }
h2 { margin: 18px 0 12px; font-size: 26px; line-height: 1.16; overflow-wrap: anywhere; }
.filters { display: grid; grid-template-columns: repeat(2, 1fr); padding: 3px; border-radius: 10px; background: #edf0f5; }
.filters a { padding: 9px 12px; border-radius: 7px; text-align: center; }
.filters a[aria-current] { background: #fff; box-shadow: 0 1px 2px #18294724; font-weight: 700; }
.orders { margin: 14px 0 0; padding: 0; list-style: none; }
.orders li { border-bottom: 1px solid var(--line); }
.order-link { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 0; }
.order-link:hover .order-name { color: var(--blue); }
.order-name { display: block; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.received, .state { color: var(--muted); }
.received { display: block; margin-top: 3px; font-size: 15px; }
.status { flex-shrink: 0; display: inline-block; padding: 3px 9px; border-radius: 8px; background: #eef1f5; font-size: 14px; }
.status-new { background: var(--soft-blue); color: #174d9b; }
.status-in_progress { background: #e4f3eb; color: #235d41; }
.back { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 8px; color: var(--blue); }
.details { margin: 18px 0 0; border-top: 1px solid var(--line); }
.details div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.details dt { color: var(--muted); }
.details dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.pagination { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.pagination a, .retry { min-height: 44px; padding: 9px 12px; color: var(--blue); background: var(--soft-blue); border: 0; border-radius: 8px; cursor: pointer; }

@media (max-width: 350px) {
  .order-link { flex-wrap: wrap; }
}