/* ============================================================
   OIT_STACK Corporate Training — Shared Auth Page Styles
   auth.css  (used by login.html and register.html)
   ============================================================ */

/* Left panel background image */
.left-panel-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../image/Login-back.png');
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: 1;
}
.dark .left-panel-bg::before {
    filter: brightness(0.5);
}
.left-panel-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(2,18,59,0.3) 0%, rgba(2,18,59,0.6) 100%);
    z-index: 2;
}

/* ── Floating box animation ── */
.circles {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    pointer-events: none;
    margin: 0; padding: 0;
}
.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px; height: 20px;
    background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(147,51,234,0.06) 100%);
    animation: animateBox 25s linear infinite;
    bottom: -150px;
    border-radius: 8px;
    border: 1px solid rgba(59,130,246,0.12);
    box-shadow: 0 4px 30px rgba(0,0,0,0.02);
    backdrop-filter: blur(1px);
    transition: background-color 0.3s, border-color 0.3s;
}
.dark .circles li {
    background: linear-gradient(135deg, rgba(96,165,250,0.04) 0%, rgba(192,132,252,0.04) 100%);
    border-color: rgba(96,165,250,0.08);
}

.circles li:nth-child(1)  { left:25%; width:80px;  height:80px;  animation-delay:-5s;  animation-duration:22s; }
.circles li:nth-child(2)  { left:10%; width:30px;  height:30px;  animation-delay:-2s;  animation-duration:12s; }
.circles li:nth-child(3)  { left:70%; width:20px;  height:20px;  animation-delay:-10s; animation-duration:20s; }
.circles li:nth-child(4)  { left:40%; width:60px;  height:60px;  animation-delay:-15s; animation-duration:18s; }
.circles li:nth-child(5)  { left:65%; width:25px;  height:25px;  animation-delay:-7s;  animation-duration:25s; }
.circles li:nth-child(6)  { left:75%; width:110px; height:110px; animation-delay:-12s; animation-duration:30s; }
.circles li:nth-child(7)  { left:35%; width:150px; height:150px; animation-delay:-18s; animation-duration:28s; }
.circles li:nth-child(8)  { left:50%; width:25px;  height:25px;  animation-delay:-22s; animation-duration:40s; }
.circles li:nth-child(9)  { left:20%; width:15px;  height:15px;  animation-delay:-4s;  animation-duration:35s; }
.circles li:nth-child(10) { left:85%; width:130px; height:130px; animation-delay:-8s;  animation-duration:16s; }
.circles li:nth-child(11) { left:5%;  width:70px;  height:70px;  animation-delay:-14s; animation-duration:24s; }
.circles li:nth-child(12) { left:55%; width:40px;  height:40px;  animation-delay:-3s;  animation-duration:14s; }
.circles li:nth-child(13) { left:80%; width:18px;  height:18px;  animation-delay:-9s;  animation-duration:19s; }
.circles li:nth-child(14) { left:15%; width:95px;  height:95px;  animation-delay:-25s; animation-duration:32s; }
.circles li:nth-child(15) { left:92%; width:50px;  height:50px;  animation-delay:-17s; animation-duration:15s; }
.circles li:nth-child(16) { left:48%; width:115px; height:115px; animation-delay:-1s;  animation-duration:27s; }
.circles li:nth-child(17) { left:62%; width:85px;  height:85px;  animation-delay:-28s; animation-duration:36s; }
.circles li:nth-child(18) { left:30%; width:22px;  height:22px;  animation-delay:-11s; animation-duration:13s; }
.circles li:nth-child(19) { left:78%; width:140px; height:140px; animation-delay:-6s;  animation-duration:34s; }
.circles li:nth-child(20) { left:45%; width:35px;  height:35px;  animation-delay:-20s; animation-duration:21s; }

@keyframes animateBox {
    0%   { transform: translateY(0) rotate(0deg);      opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-120dvh) rotate(720deg); opacity: 0; border-radius: 50%; }
}

/* ── Toast slide-in ── */
@keyframes toastIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.toast-enter { animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ── Password strength bar ── */
.strength-bar { height: 4px; border-radius: 9999px; transition: width 0.4s ease, background-color 0.4s ease; }

/* ── Input focus ring fix for dark selects ── */
select option { background-color: #1e293b; color: #f1f5f9; }