:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #16181d;
  background: #f5f7fb;
}

* { box-sizing: border-box; }
body { margin: 0; }
.shell { width: min(1180px, calc(100vw - 32px)); margin: 42px auto; }
.hero { display: flex; gap: 20px; align-items: center; margin-bottom: 28px; }
.mark { width: 58px; height: 58px; border-radius: 18px; background: #e8f2ff; color: #0877ee; display: grid; place-items: center; font-weight: 900; font-size: 28px; }
.back { color: #647084; text-decoration: none; font-size: 14px; }
h1 { margin: 6px 0 4px; font-size: clamp(38px, 6vw, 64px); line-height: 1; letter-spacing: -0.05em; }
p { margin: 0; color: #687386; font-size: 18px; }
.card, .result { background: #fff; border: 1px solid #e1e6ef; border-radius: 18px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); padding: 28px; }
label span { display: block; font-weight: 800; margin-bottom: 10px; }
textarea { width: 100%; min-height: 220px; resize: vertical; border: 1px solid #d7deea; border-radius: 12px; padding: 14px; font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; outline: none; }
textarea:focus { border-color: #0877ee; box-shadow: 0 0 0 4px rgba(8, 119, 238, 0.12); }
.actions { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
button { border: 0; border-radius: 14px; background: #0877ee; color: #fff; padding: 15px 24px; font-weight: 800; font-size: 16px; cursor: pointer; }
button:disabled { opacity: 0.65; cursor: wait; }
small { color: #6b7280; }
.alert { margin: 22px 0; border-radius: 14px; padding: 16px 18px; border: 1px solid #fecaca; background: #fff1f2; color: #dc2626; }
.alert.ok { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.hidden { display: none; }
.result { margin-top: 22px; }
.status { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
.status strong { font-size: 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.cell { border: 1px solid #e7ecf5; background: #f9fbff; border-radius: 14px; padding: 14px; }
.cell span { display: block; color: #6b7280; font-size: 13px; margin-bottom: 7px; }
.cell strong { word-break: break-word; }
.portal { margin-top: 18px; border-top: 1px solid #e7ecf5; padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.portal a { color: #0877ee; font-weight: 800; text-decoration: none; }
.portal .portal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 12px;
  background: #0877ee;
  color: #fff;
  box-shadow: 0 8px 18px rgba(8, 119, 238, 0.22);
}
.portal .portal-button:hover { background: #0568d8; }
@media (max-width: 640px) {
  .shell { width: min(100% - 20px, 1180px); margin: 20px auto; }
  .hero { align-items: flex-start; }
  .mark { width: 48px; height: 48px; border-radius: 14px; }
  .card, .result { padding: 18px; }
}