/* Based on physx-combined-files (1).html. */
* {
      box-sizing: border-box;
    }

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

    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #444;
    }

    .page {
      min-height: 100vh;
      padding-top: 16px;
    }

    .logo {
      display: block;
      width: 90px;
      height: 50px;
      object-fit: contain;
      margin: 0 auto;
    }

    .panel {
      width: 562px;
      margin: 63px auto 0;
      padding: 36px 50px 40px;
      background: rgb(240, 240, 240);
    }

    .title {
      margin: 0 0 16px;
      font-size: 42px;
      line-height: 1.08;
      font-weight: 300;
      letter-spacing: -1px;
      color: #3f3f3f;
    }


    .login-title {
      font-size: 31px;
      white-space: nowrap;
      letter-spacing: -0.5px;
    }

    .email-wrap {
      position: relative;
      width: 100%;
    }

    .mail-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      width: 26px;
      height: 20px;
      transform: translateY(-50%);
      pointer-events: none;
      opacity: .9;
    }

    .email-input {
      display: block;
      width: 100%;
      height: 43px;
      padding: 8px 14px 8px 43px;
      border: 1px solid #c9c9c9;
      border-radius: 5px;
      outline: none;
      background: #fff;
      color: #555;
      font: 18px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    .email-input::placeholder {
      color: #a8a8a8;
      opacity: 1;
    }

    .email-input:focus {
      border-color: #66afe9;
      box-shadow:
        inset 0 1px 1px rgba(0,0,0,.075),
        0 0 8px rgba(102,175,233,.6);
    }

    .continue-btn,
    .submit-btn {
      margin-top: 22px;
      height: 42px;
      padding: 0 18px;
      border: 1px solid #4cae4c;
      background: #5cb85c;
      color: #fff;
      font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
      cursor: pointer;
    }

    .continue-btn:hover,
    .submit-btn:hover {
      background: #449d44;
    }

    .screen {
      display: none;
    }

    .screen.active {
      display: block;
    }

    .done-panel.active {
      min-height: 170px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .done-title {
      margin: 0;
    }

    .file-label {
      display: block;
      margin-bottom: 10px;
      font-size: 18px;
      color: #555;
    }

    .drop-zone {
      min-height: 150px;
      border: 2px dashed #bcbcbc;
      border-radius: 5px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 24px;
      cursor: pointer;
      transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }

    .drop-zone:hover,
    .drop-zone.dragover {
      border-color: #66afe9;
      background: #fafcff;
      box-shadow: 0 0 8px rgba(102,175,233,.25);
    }

    .drop-zone-content {
      max-width: 360px;
    }

    .drop-main {
      font-size: 18px;
      color: #666;
      margin-bottom: 6px;
    }

    .drop-sub {
      font-size: 14px;
      color: #999;
    }

    .file-input {
      display: none;
    }

    .size-note {
      margin-top: 9px;
      font-size: 14px;
      color: #8a8a8a;
    }

    .selected-files {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .selected-file {
      min-height: 46px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px 8px 12px;
      border: 1px solid #c9c9c9;
      border-radius: 5px;
      background: #fff;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.04);
    }

    .selected-file-icon {
      flex: 0 0 auto;
      width: 23px;
      height: 28px;
      position: relative;
      border: 1px solid #aaa;
      background: #f8f8f8;
    }

    .selected-file-icon::after {
      content: "";
      position: absolute;
      right: -1px;
      top: -1px;
      width: 8px;
      height: 8px;
      border-left: 1px solid #aaa;
      border-bottom: 1px solid #aaa;
      background: #fff;
    }

    .selected-file-info {
      min-width: 0;
      flex: 1;
    }

    .selected-file-name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 16px;
      color: #555;
    }

    .selected-file-size {
      margin-top: 2px;
      font-size: 12px;
      color: #999;
    }

    .remove-file {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      border: 0;
      background: transparent;
      color: #999;
      font-size: 25px;
      line-height: 26px;
      cursor: pointer;
      border-radius: 4px;
    }

    .remove-file:hover {
      color: #555;
      background: #eee;
    }

    .file-error {
      display: none;
      margin-top: 10px;
      color: #a94442;
      font-size: 14px;
    }

    .file-error.visible {
      display: block;
    }

    .submit-btn:disabled {
      opacity: .55;
      cursor: not-allowed;
    }

    .overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0,0,0,.28);
      z-index: 10;
    }

    .overlay.visible {
      display: flex;
    }

    .modal {
      width: 440px;
      max-width: 100%;
      padding: 30px 34px 28px;
      background: #f0f0f0;
      box-shadow: 0 8px 28px rgba(0,0,0,.2);
    }

    .modal h2 {
      margin: 0 0 14px;
      font-size: 30px;
      font-weight: 300;
      color: #3f3f3f;
    }

    .modal p {
      margin: 0 0 24px;
      font-size: 17px;
      line-height: 1.5;
      color: #555;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .cancel-btn,
    .confirm-btn {
      min-width: 110px;
      height: 40px;
      border: 1px solid transparent;
      font-size: 15px;
      cursor: pointer;
    }

    .cancel-btn {
      background: #fff;
      border-color: #c9c9c9;
      color: #555;
    }

    .confirm-btn {
      background: #5cb85c;
      border-color: #4cae4c;
      color: #fff;
    }

    .success {
      display: none;
      margin-top: 20px;
      padding: 12px 14px;
      border: 1px solid #b7ddb7;
      background: #edf7ed;
      color: #3c763d;
      font-size: 15px;
    }

    .success.visible {
      display: block;
    }

    @media (max-width: 620px) {
      .login-title {
        font-size: 27px;
      }
      .page {
        padding: 16px 14px 0;
      }

      .panel {
        width: 100%;
        margin-top: 52px;
        padding: 30px 32px 34px;
      }

      .title {
        font-size: 36px;
      }
    }

/* Live controls and mobile adjustments. */

[hidden] { display: none !important; }
.page { padding-bottom: 32px; }
.panel { max-width: 100%; }
button, input { font: inherit; }
button:focus-visible, .drop-zone:focus-visible { outline: 2px solid #387aab; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.notice { padding: 12px 14px; margin: 16px 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.notice-error { color: #943b39; background: #fbeaea; border: 1px solid #e3bdbc; }
.notice-success { color: #3c763d; background: #edf7ed; border: 1px solid #b7ddb7; }
.formats { margin-top: 12px; font-size: 12px; line-height: 1.5; color: #777; }
.drop-zone.is-disabled { cursor: default; }
progress { width: 100%; height: 6px; accent-color: #5cb85c; }
button:disabled { cursor: not-allowed; opacity: .55; }
.field-hint { margin: 12px 0 0; color: #777; font-size: 13px; line-height: 1.5; }
.participant-footer { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; margin-top: 24px; font-size: 13px; }
.identity { min-width: 0; overflow-wrap: anywhere; }
.text-button { padding: 0; border: 0; background: none; color: #666; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 13px; }
dialog.modal { border: 0; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow: auto; color: #444; }
dialog::backdrop { background: rgba(0, 0, 0, .28); }
.modal .confirmation-summary { font-size: 14px; color: #777; margin-top: -8px; }
@media (max-width: 380px) {
  .panel { padding: 26px 22px 30px; }
  .title { font-size: 32px; }
  .email-input { font-size: 16px; }
  .modal { padding: 24px; }
  .modal-actions { flex-wrap: wrap; }
}

h1.login-title { font-size: 31px; white-space: nowrap; letter-spacing: -.5px; }
.done-panel { min-height: 170px; display: flex; align-items: center; justify-content: center; text-align: center; }
.done-title { margin: 0; }
.selected-file-info { line-height: 1.35; }
.selected-file-icon.is-stored { border-color: #7aa67a; }
.selected-file-icon.is-stored::after { border-color: #7aa67a; }
.selected-file-name { display: block; font-weight: 400; }
.selected-file-size { display: block; }
.selected-files:empty { margin-top: 0; }
.formats { margin-top: 4px; }
@media (max-width: 620px) {
  h1.login-title { font-size: 27px; white-space: normal; }
}
@media (max-width: 380px) {
  h1.login-title { font-size: 27px; }
}