/* Only new API states. Original styles.css remains unchanged. */
[hidden] { display: none !important; }
#request-panel { overflow-wrap: anywhere; line-height: 1.5; }
#request-panel p { margin: 8px 0; }
/* Hide the attempt counter only; API limits remain unchanged. */
#attempts { display: none !important; }
#request-panel button { max-width: 100%; white-space: normal; }
.api-consent { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0; }
.api-consent input { flex: 0 0 15px; width: 15px; height: 15px; margin: 2px 0 0; }
/* Remove the outer focus ring only from phone and SMS inputs.
   Keep normal borders, invalid-code styling and other focus indicators. */
#phone:focus, #phone:focus-visible,
#code:focus, #code:focus-visible {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}
#code-form { margin-top: 12px; }
#code-form label { display: block; margin-bottom: 3px; }
#code { display: block; width: 167px; max-width: 100%; border: 2px solid #444; border-radius: 4px; height: 23px; }
#code-form button { margin-top: 12px; }
#code-error { color: #b00020; font-size: 14px; line-height: 1.5; }
#code[aria-invalid="true"] { border-color: #b00020; }
.api-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
#form-error { margin: 10px 5px; color: var(--error); line-height: 1.5; overflow-wrap: anywhere; }
#form-error:empty, #request-panel p:empty { display: none; }
button:disabled { opacity: .55; cursor: default; }
@media (max-width: 640px) {
  #code { width: 210px; height: 32px; font-size: 16px; }
}

/* Slovak wordmark, preserving the original header footprint. */
.brand-logo { display:block; width:218px; height:auto; max-width:100%; }
@media(max-width:640px) { .brand-logo { width:190px; } }