* { box-sizing: border-box; margin: 0; padding: 0; }

body, html {
    height: 100%; width: 100%;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow: hidden;
    background: #f8faff;
    cursor: none !important;
}
body *, body a, body button, body input, body label { cursor: none !important; }

body, html { cursor: none !important; }
*, *::before, *::after { cursor: none !important; }
a, button, input, textarea, select, label, [role="button"] { cursor: none !important; }

/* ── Background ── */
.signin-bg {
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    background: linear-gradient(135deg, #f8faff 0%, #f0faf6 50%, #fffef5 100%);
}

/* ── Canvas ── */
#particleCanvas {
    position: fixed; inset: 0; z-index: 99;
    pointer-events: none;
}

/* ── Wrapper ── */
.signin-wrapper {
    position: relative; z-index: 10;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100vh; width: 100%;
}

/* ── Logo Stage ── */
.signin-logo-stage {
    display: flex; align-items: center; justify-content: center;
    position: absolute; z-index: 3;
    width: 140px; height: 140px;
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.signin-logo-stage.is-visible { opacity: 1; transform: scale(1); }
.signin-logo-stage.is-fading {
    opacity: 0; transform: scale(1.3);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.signin-logo-ring {
    position: absolute; inset: -8px;
    border: 2px solid transparent; border-radius: 50%;
    background: conic-gradient(from 0deg, #3b82f6, #10b981, #eab308, #06b6d4, #3b82f6) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: ringRotate 3s linear infinite; opacity: 0.5;
}
@keyframes ringRotate { to { transform: rotate(360deg); } }
.signin-logo-img {
    width: 100px; height: 100px; position: relative; z-index: 1;
    filter: drop-shadow(0 0 20px rgba(59,130,246,.2));
    animation: logoPulse 2.5s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(59,130,246,.2)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 28px rgba(16,185,129,.3)); }
}

/* ── Login Card ── */
.signin-card {
    width: 420px; max-width: 90vw; position: relative;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border-radius: 22px; padding: 44px 40px;
    box-shadow: 0 24px 64px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.95);
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
    z-index: 11;
}
.signin-card::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: 23px; padding: 1px;
    background: linear-gradient(135deg, rgba(59,130,246,.2), rgba(16,185,129,.15), rgba(234,179,8,.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.signin-card.is-visible { opacity: 1; transform: translateY(0); }
.signin-card.is-leaving { opacity: 0; transform: scale(0.92); transition: opacity 0.5s ease, transform 0.5s ease; }

.signin-card__header { text-align: center; margin-bottom: 32px; }
.signin-card__logo { width: 48px; height: 48px; margin-bottom: 16px; filter: drop-shadow(0 2px 8px rgba(59,130,246,.12)); }
.signin-card__title { color: #111827; font-size: 22px; font-weight: 800; margin-bottom: 4px; letter-spacing: -.3px; }
.signin-card__sub { color: #9ca3af; font-size: 13px; }

/* ── Form ── */
.signin-field { margin-bottom: 18px; }
.signin-label {
    display: block; color: #6b7280; font-size: 11px;
    font-weight: 700; margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: .04em;
}
.signin-label i { margin-right: 4px; font-size: 10px; color: #3b82f6; }
.signin-input {
    width: 100%; padding: 11px 14px;
    background: rgba(255,255,255,.9); border: 1.5px solid #e5e7eb;
    border-radius: 10px; color: #111827; font-size: 14px; outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.signin-input::placeholder { color: #c4c9d4; }
.signin-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.08), 0 1px 3px rgba(0,0,0,.04);
    background: #fff;
}
.signin-forgot { display: inline-block; margin-top: 5px; color: #b0b5c0; font-size: 11px; text-decoration: none; transition: color .2s; }
.signin-forgot:hover { color: #3b82f6; }

/* ── Button ── */
.signin-btn {
    width: 100%; padding: 12px; margin-top: 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
    color: #fff; border: none; border-radius: 11px;
    font-size: 14px; font-weight: 700; cursor: none !important;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .15s, box-shadow .2s, opacity .2s;
    box-shadow: 0 4px 14px rgba(59,130,246,.22);
    position: relative; overflow: hidden;
}
.signin-btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    animation: shimmer 2.5s ease-in-out infinite;
}
@keyframes shimmer { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } }
.signin-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59,130,246,.3); }
.signin-btn:active { transform: translateY(0); }
.signin-btn:disabled { opacity: 0.7; transform: none; }

/* ── Footer ── */
.signin-footer { text-align: center; margin-top: 22px; font-size: 12px; color: #b0b5c0; }
.signin-footer a { color: #10b981; text-decoration: none; font-weight: 700; margin-left: 3px; transition: color .2s; }
.signin-footer a:hover { color: #059669; }

/* ── Auth Panel Transitions ── */
.auth-panel {
    display: none;
}
.auth-panel.active {
    display: block;
}

/* ── Success Icon (password reset) ── */
.signin-success-icon {
    margin-bottom: 16px;
}
.signin-success-icon i {
    font-size: 56px;
    color: #10b981;
    filter: drop-shadow(0 0 20px rgba(16,185,129,.3));
    animation: successPop 0.5s ease;
}

/* ── Success Flash (login) ── */
.signin-success-flash {
    position: absolute; z-index: 10;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    opacity: 0; transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.signin-success-flash.is-visible { opacity: 1; transform: scale(1); }
.signin-success-flash.is-fading { opacity: 0; transform: scale(1.2); transition: opacity 0.6s ease, transform 0.6s ease; }
.signin-success-flash i { font-size: 68px; color: #10b981; filter: drop-shadow(0 0 24px rgba(16,185,129,.35)); animation: successPop 0.5s ease; }
.signin-success-flash span { font-size: 22px; font-weight: 800; color: #111827; }
@keyframes successPop { 0% { transform: scale(0) rotate(-10deg); } 60% { transform: scale(1.15) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }

/* ── Toast ── */
.signin-toast {
    visibility: hidden;
    min-width: 280px; max-width: 400px;
    color: #fff; text-align: center;
    padding: 12px 24px; border-radius: 12px;
    position: fixed; z-index: 200;
    bottom: 40px; left: 50%; transform: translateX(-50%) translateY(10px);
    font-size: 13px; font-weight: 600;
    opacity: 0;
    backdrop-filter: blur(12px);
    transition: opacity 0.4s, visibility 0s 0.4s, transform 0.4s;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.signin-toast.show {
    visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}
.signin-toast.success {
    background: linear-gradient(135deg, #10b981, #059669);
}
.signin-toast.error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* ── Page Exit ── */
.signin-exit { animation: pageExit 0.8s ease forwards; }
@keyframes pageExit { to { opacity: 0; transform: scale(1.05); } }

/* ── Responsive ── */
@media (max-width: 480px) {
    .signin-card { padding: 28px 24px; border-radius: 16px; }
    .signin-card__title { font-size: 19px; }
    .signin-logo-stage { width: 110px; height: 110px; }
    .signin-logo-img { width: 76px; height: 76px; }
}