:root {
   color-scheme: light;
   font-family: Arial, "Noto Sans Hebrew", sans-serif;
   background: #f4f6f8;
   color: #17212b;
}

* {
   box-sizing: border-box;
}

[hidden] {
   display: none !important;
}

html,
body {
   width: 100%;
   height: 100%;
   margin: 0;
}

body {
   overflow: hidden;
   -webkit-user-select: none;
   user-select: none;
}

button {
   font: inherit;
}

.app {
   position: relative;
   width: 100%;
   height: 100vh;
   height: 100dvh;
   background: #f4f6f8;
}

.start-screen {
   display: grid;
   min-height: 100%;
   place-items: center;
   padding: 24px;
}

.start-panel {
   width: min(560px, 100%);
   padding: 28px;
   border: 1px solid #d8dee6;
   border-radius: 8px;
   background: #ffffff;
   box-shadow: 0 18px 50px rgba(26, 38, 52, 0.12);
}

.start-panel h1 {
   margin: 0 0 12px;
   font-size: 34px;
   line-height: 1.2;
}

.start-panel p {
   margin: 0 0 20px;
   color: #415164;
   font-size: 18px;
   line-height: 1.55;
}

.primary-button {
   min-height: 48px;
   padding: 0 22px;
   border: 0;
   border-radius: 6px;
   background: #1769aa;
   color: #ffffff;
   cursor: pointer;
   font-weight: 700;
}

.primary-button:focus-visible {
   outline: 3px solid #8bc5ff;
   outline-offset: 3px;
}

.secondary-button {
   min-height: 48px;
   padding: 0 22px;
   border: 1px solid #aeb8c4;
   border-radius: 6px;
   background: #ffffff;
   color: #17212b;
   cursor: pointer;
   font-weight: 700;
}

.secondary-button:focus-visible {
   outline: 3px solid #8bc5ff;
   outline-offset: 3px;
}

.support-note {
   margin-top: 16px;
   color: #8a4a00;
}

.exam-screen {
   display: grid;
   height: 100%;
   grid-template-rows: auto 1fr;
   background: #ffffff;
}

.exam-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   min-height: 54px;
   padding: 8px 16px;
   border-bottom: 1px solid #d8dee6;
   background: #17212b;
   color: #ffffff;
}

.exam-bar strong,
.exam-bar span {
   display: inline-block;
}

.exam-bar strong {
   margin-inline-end: 12px;
}

.exam-bar span {
   color: #d4dde8;
}

.violation-counter {
   white-space: nowrap;
   font-weight: 700;
}

.form-host {
   min-height: 0;
}

.form-frame {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
   background: #ffffff;
}

.modal {
   position: fixed;
   inset: 0;
   z-index: 20;
   display: grid;
   place-items: center;
   padding: 20px;
   background: rgba(15, 23, 32, 0.68);
}

.modal[hidden] {
   display: none;
}

.modal-panel {
   width: min(460px, 100%);
   padding: 24px;
   border-radius: 8px;
   background: #ffffff;
   color: #17212b;
   box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.modal-panel h2 {
   margin: 0 0 10px;
   font-size: 26px;
}

.modal-panel p {
   margin: 0 0 22px;
   color: #415164;
   font-size: 17px;
   line-height: 1.5;
}

.modal-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

@media (max-width: 640px) {
   .start-panel {
      padding: 22px;
   }

   .start-panel h1 {
      font-size: 28px;
   }

   .start-panel p {
      font-size: 16px;
   }

   .exam-bar {
      align-items: flex-start;
      flex-direction: column;
      min-height: 72px;
      gap: 6px;
   }

   .modal-actions {
      flex-direction: column;
   }
}