:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #30383c;
  background: #f3f6f7;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.portal-header {
  align-items: center;
  background: #343a43;
  color: #fff;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  min-height: 68px;
  padding: 16px max(24px, calc((100vw - 1392px) / 2));
}
.portal-brand { align-items: center; display: flex; min-height: 36px; }
.portal-brand img { display: block; height: auto; max-height: 30px; max-width: 150px; width: auto; }
.portal-main { margin: 0 auto; max-width: 1440px; padding: 28px 24px 40px; }
.portal-intro { align-items: end; display: grid; gap: 0 20px; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 20px; }
.portal-label { color: #6b777d; display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px; text-transform: uppercase; }
h1 { color: #2f363a; font-size: 25px; line-height: 1.25; margin: 0 0 5px; }
.portal-intro p { color: #66737a; font-size: 14px; margin: 0; }
.portal-contract-meta { align-items: center; color: #66737a; display: flex; flex-wrap: wrap; font-size: 13px; gap: 7px 16px; grid-column: 1 / -1; margin-top: 9px; }
.portal-contract-meta strong { color: #46545b; font-size: 13px; line-height: 1; }
.portal-contract-meta span, .portal-contract-meta time { position: relative; }
.portal-contract-meta span::before, .portal-contract-meta time::before { color: #bdc6ca; content: ""; height: 13px; left: -9px; position: absolute; top: 1px; width: 1px; background: #d9e0e3; }
.portal-mobile-instruction { display: none; grid-column: 1 / -1; }
.portal-download, .portal-button, .portal-button-secondary {
  align-items: center;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  text-decoration: none;
}
.portal-download, .portal-button-secondary { background: #e3eaed; color: #38474e; }
.portal-download { flex: 0 0 auto; white-space: nowrap; }
.portal-button { background: #465e6a; color: #fff; width: 100%; }
.portal-button:hover { background: #354c57; }
.portal-download:hover, .portal-button-secondary:hover { background: #d6e1e5; }
.portal-state-success .portal-button-secondary { background: #465e6a; color: #fff; }
.portal-state-success .portal-button-secondary:hover { background: #354c57; color: #fff; }
.portal-layout { align-items: start; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 350px; }
.portal-signing, .portal-state {
  background: #fff;
  border: 1px solid #dfe5e7;
  border-radius: 7px;
}
.portal-document {
  background: #e8edef;
  border-radius: 5px;
  height: calc(100vh - 148px);
  min-height: 620px;
  overflow-y: auto;
  padding: 16px;
  position: relative;
}
.portal-pdf-pages { align-items: center; display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.portal-pdf-page { background: #fff; box-shadow: 0 1px 4px rgba(38, 49, 54, .18); display: block; height: auto; max-width: 100%; }
.portal-document-loading { align-items: center; color: #68757b; display: flex; flex-direction: column; font-size: 12px; gap: 10px; inset: 0; justify-content: center; position: absolute; }
.portal-document-loading span { animation: portal-spin .8s linear infinite; border: 3px solid #cfd9dd; border-radius: 50%; border-top-color: #526b77; height: 25px; width: 25px; }
.portal-document.is-loaded .portal-document-loading { display: none; }
.portal-document.is-error .portal-document-loading span { display: none; }
@keyframes portal-spin { to { transform: rotate(360deg); } }
.portal-signing { padding: 24px; position: sticky; top: 20px; }
.portal-signing h2 { font-size: 19px; margin: 0 0 8px; }
.portal-signing > p { color: #657279; font-size: 13px; line-height: 1.45; margin: 0 0 22px; overflow-wrap: anywhere; }
.portal-signing label:not(.portal-consent) { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.portal-signing input[type="text"] { border: 1px solid #cfd8dc; border-radius: 4px; font: 16px/1.3 Arial, sans-serif; height: 44px; margin-bottom: 18px; padding: 0 12px; width: 100%; }
.portal-signing input[type="text"]:focus { border-color: #66808c; outline: 2px solid #dfe8eb; }
.portal-signature-fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.portal-signature-fieldset legend { font-size: 13px; font-weight: 700; margin-bottom: 7px; padding: 0; }
.portal-signature-modes { background: #edf2f4; border-radius: 4px; display: inline-flex; margin-bottom: 10px; padding: 3px; }
.portal-signature-modes button { background: transparent; border: 0; border-radius: 3px; color: #536168; cursor: pointer; font: 600 13px/1 Arial, sans-serif; min-height: 34px; padding: 0 18px; }
.portal-signature-modes button.is-active { background: #fff; box-shadow: 0 1px 2px rgba(41, 52, 57, .14); color: #30383c; }
.portal-signature-typed, .portal-signature-drawn { background: #fff; border: 1px solid #cfd8dc; border-radius: 4px; min-height: 94px; overflow: hidden; position: relative; }
.portal-signature-fieldset [hidden] { display: none; }
.portal-signature-typed { align-items: center; background: #f7f9fa; cursor: default; display: flex; justify-content: center; padding: 24px 15px 12px; }
.portal-signature-typed small { color: #879399; font-size: 9px; font-weight: 700; left: 10px; position: absolute; text-transform: uppercase; top: 8px; }
.portal-signature-typed span { color: #344047; font: italic 25px/1.2 Georgia, "Times New Roman", serif; overflow-wrap: anywhere; text-align: center; }
.portal-signature-typed span.is-placeholder { color: #9aa5aa; font-size: 18px; }
.portal-signature-drawn canvas { display: block; height: 112px; touch-action: none; width: 100%; }
.portal-signature-clear { background: rgba(255, 255, 255, .9); border: 0; border-radius: 3px; bottom: 7px; color: #59676d; cursor: pointer; font: 600 11px/1 Arial, sans-serif; padding: 7px 9px; position: absolute; right: 7px; }
.portal-signature-clear:hover { background: #edf2f4; }
.portal-consent { align-items: flex-start; background: #f5f7f8; border-radius: 4px; display: flex; font-size: 12.5px; gap: 10px; line-height: 1.45; margin-bottom: 18px; padding: 12px; }
.portal-consent input { flex: 0 0 auto; height: 16px; margin: 2px 0 0; width: 16px; }
.portal-legal { color: #7a858a !important; font-size: 11px !important; margin: 15px 0 0 !important; }
.portal-alert { background: #fff; border: 1px solid #f0b6b6; border-left: 4px solid #e06666; border-radius: 5px; color: #8f2929; font-size: 13px; margin-bottom: 18px; padding: 11px 13px; }
.portal-state { margin: 80px auto; max-width: 620px; padding: 48px 30px; text-align: center; }
.portal-state-icon { align-items: center; background: #edf2f4; border-radius: 50%; color: #617079; display: inline-flex; font-size: 22px; height: 48px; justify-content: center; margin-bottom: 18px; width: 48px; }
.portal-state-success .portal-state-icon { background: #def3ec; color: #238362; }
.portal-state p { color: #66737a; font-size: 14px; line-height: 1.55; margin: 8px auto 22px; max-width: 450px; }
.portal-test-link { color: #465e6a; display: block; font-size: 12px; margin-top: 18px; }
.portal-signing-jump { display: none; }

@media (max-width: 820px) {
  body:has(.portal-signing-jump) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .portal-header { min-height: 60px; padding: 14px 16px; }
  .portal-main { padding: 20px 14px 30px; }
  .portal-intro { align-items: start; }
  .portal-contract-meta { gap: 7px 13px; }
  .portal-contract-meta span::before, .portal-contract-meta time::before { left: -7px; }
  .portal-download { font-size: 13px; min-height: 40px; padding: 0 13px; }
  .portal-mobile-instruction { color: #465e6a !important; display: block; font-size: 12px !important; line-height: 1.4; margin-top: 9px !important; }
  .portal-layout { display: flex; flex-direction: column; }
  .portal-document { height: auto; min-height: 440px; order: 1; overflow: visible; width: 100%; }
  .portal-signing { order: 2; position: static; width: 100%; }
  .portal-signing-jump {
    align-items: center;
    background: #465e6a;
    border-radius: 5px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 4px 15px rgba(32, 43, 48, .24);
    color: #fff;
    display: flex;
    font-size: 16px;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    left: 14px;
    opacity: 1;
    position: fixed;
    right: 14px;
    text-decoration: none;
    transform: translateY(0);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
    visibility: visible;
    z-index: 20;
  }
  .portal-signing-jump.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    visibility: hidden;
  }
  h1 { font-size: 21px; }
}