:root {
  color-scheme: light;
  --navy: #0B1B3A;
  --secondary: #64748B;
  --muted: #94A3B8;
  --blue: #2F5FD6;
  --soft: #EEF4FF;
  --border: #DCE8F7;
  --bg: #F4F7FB;
  --white: #FFFFFF;
  --green: #15803D;
  --green-bg: #ECFDF3;
  --green-border: #BBF7D0;
  --red: #B91C1C;
  --red-bg: #FFF1F2;
  --red-border: #FECACA;
  --neutral: #475569;
  --neutral-bg: #F3F7FC;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--navy);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
main {
  width: min(100% - 28px, 680px);
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 0 calc(36px + env(safe-area-inset-bottom));
}
.brand { margin: 0 0 20px; }
.brand-logo { display: block; width: 164px; max-width: 52%; height: auto; margin-inline: auto; }
.hero { margin: 0 0 22px; }
.hero h1 { font-size: clamp(23px, 5.6vw, 28px); line-height: 1.18; margin: 0 0 8px; letter-spacing: -.025em; }
.meta { color: var(--secondary); font-size: 14px; line-height: 1.45; }
.summary, .package {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(11, 27, 58, .05);
}
.summary {
  padding: 18px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.summary span { display: block; color: var(--secondary); font-size: 12px; margin-bottom: 5px; }
.summary strong { display: block; font-size: 17px; line-height: 1.3; }
.summary > div:first-child strong { color: var(--blue); }
.package { padding: 18px; margin: 14px 0; }
.package h2 { font-size: 20px; line-height: 1.25; margin: 0; }
.package-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.badge { background: var(--soft); color: var(--blue); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; line-height: 1.25; }
.composition { margin: 14px 0 18px; color: var(--secondary); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.composition strong { color: var(--navy); }
.result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #EAF0F8;
  font-size: 14px;
  line-height: 1.35;
}
.result > span { min-width: 0; }
.status { flex: none; border: 1px solid; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; text-align: center; }
.status-success { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.status-error { color: var(--red); background: var(--red-bg); border-color: var(--red-border); }
.status-neutral { color: var(--neutral); background: var(--neutral-bg); border-color: var(--border); }
.photos { margin-top: 16px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tabs button {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  color: var(--blue);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.tabs button.active { background: var(--soft); border-color: #AFC7FF; color: #244FBF; }
.tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.photo {
  margin-top: 10px;
  min-height: 180px;
  border-radius: 16px;
  background: #F8FAFC;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--secondary);
  font-size: 14px;
  text-align: center;
  padding: 12px;
}
.photo img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; border-radius: 10px; }
.state { padding: 52px 18px; text-align: center; color: var(--secondary); }
.state h1 { color: var(--navy); font-size: 24px; }
.foot { margin: 22px auto 0; max-width: 54ch; text-align: center; color: var(--secondary); font-size: 12px; line-height: 1.5; }
@media (max-width: 460px) {
  main { width: min(100% - 20px, 680px); padding-top: calc(18px + env(safe-area-inset-top)); }
  .brand { margin-bottom: 18px; }
  .summary { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .summary > div:first-child { grid-column: 1 / -1; padding-bottom: 12px; border-bottom: 1px solid #EAF0F8; }
  .package { padding: 14px; }
  .result { align-items: flex-start; }
}