.auth-body
{
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
   min-height: 100dvh;
   padding: 20px;
   padding-top: max(320px, 30vh);
   box-sizing: border-box;
}
.auth-box
{
   width: min(360px, 100%);
   background-color: rgba(20, 0, 0, 0.92);
   border: 1px solid #FF8C00;
   border-radius: 10px;
   box-shadow: 0 0 25px rgba(255, 102, 0, 0.5);
   padding: 24px;
   color: #F7F7F7;
}
.auth-box-wide
{
   width: min(480px, 100%);
}
.auth-box h1
{
   margin: 0 0 16px 0;
   color: #FF8C00;
   font-family: Arial;
   font-size: 22px;
   text-align: center;
}
.auth-box h2
{
   margin: 0 0 10px 0;
   color: #FF8C00;
   font-family: Arial;
   font-size: 16px;
}
.auth-meta
{
   color: #ccc;
   font-size: 13px;
   margin: 0 0 12px 0;
}
.auth-section
{
   border-top: 1px solid #442200;
   margin-top: 18px;
   padding-top: 16px;
}
.auth-form
{
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.auth-form label
{
   color: #FF8C00;
   font-size: 13px;
   margin-top: 6px;
}
.auth-form input
{
   background-color: #1a0a05;
   border: 1px solid #663300;
   color: #F7F7F7;
   border-radius: 6px;
   padding: 10px;
   font-size: 14px;
}
.auth-form input:focus
{
   outline: 1px solid #FF8C00;
}
.auth-form button
{
   margin-top: 10px;
   background-color: #800000;
   color: #FFD700;
   border: 1px solid #FF8C00;
   border-radius: 6px;
   padding: 10px;
   font-size: 14px;
   cursor: pointer;
}
.auth-form button:hover
{
   background-color: #FF6600;
   color: #000;
}
.auth-error
{
   color: #ff6b6b;
   font-size: 13px;
   margin: 0 0 12px 0;
}
.auth-success
{
   color: #8fe0c4;
   font-size: 13px;
   margin: 0 0 12px 0;
}
.auth-hint
{
   color: #999;
   font-size: 12px;
   margin: 8px 0 0 0;
}
.auth-qr
{
   display: flex;
   justify-content: center;
   margin: 8px 0;
   padding: 10px;
   background-color: #ffffff;
   border-radius: 6px;
   width: fit-content;
}
.auth-secret-fallback
{
   margin: 8px 0 0 0;
}
.auth-secret-fallback summary
{
   color: #999;
   font-size: 12px;
   cursor: pointer;
}
.auth-secret-fallback .auth-secret
{
   margin-top: 8px;
}
.auth-secret
{
   font-family: "Courier New", monospace;
   font-size: 16px;
   letter-spacing: 1px;
   background-color: #1a0a05;
   border: 1px dashed #663300;
   border-radius: 6px;
   padding: 10px;
   text-align: center;
   color: #FFD700;
}
.auth-back
{
   display: inline-block;
   margin-top: 16px;
   margin-right: 12px;
   color: #999;
   font-size: 13px;
   text-decoration: none;
}
.auth-back:hover
{
   color: #FF8C00;
}