/* ---- 認證頁（Login / Register / Logout / AccessDenied / ResetPassword）----
   雙面板滑動切換版型移植自 LTS_Passport，配色改成黑底綠字 Matrix 風格。
   兩頁（/Account/Login、/Account/Register）都渲染完整的兩個面板，
   差別只在初始有沒有 .right-panel-active，切換靠 CSS transform，不重新載入頁面。
   此檔自給自足，不依賴 Bootstrap / 外部字型。 */

:root {
    --mx-green: #00ff41;
    --mx-dim: #0a8f2e;
    --mx-bg: #000;
    --mx-panel: #050805;
    --mx-danger: #ff4d4f;
    --mx-glow: rgba(0, 255, 65, 0.25);
    --mx-font: "JetBrains Mono", "Share Tech Mono", "Noto Sans TC", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--mx-bg);
    color: var(--mx-green);
    font-family: var(--mx-font);
}

.auth-body {
    min-height: 100vh;
}

/* 背景數位雨：固定全螢幕、最底層、不吃滑鼠事件 */
.matrix-rain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.45;
}

.auth-wrapper {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mx-font);
    padding: 24px 16px;
    box-sizing: border-box;
}

.auth-container {
    background: var(--mx-panel);
    border-radius: 12px;
    border: 1px solid var(--mx-green);
    box-shadow: 0 0 24px var(--mx-glow), inset 0 0 40px rgba(0, 255, 65, 0.04);
    position: relative;
    overflow: hidden;
    width: 900px;
    max-width: 100%;
    min-height: 580px;
}

.auth-container .form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.auth-container .sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.auth-container .sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.auth-container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.auth-container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: auth-show 0.6s;
}

@keyframes auth-show {
    0%, 49.99% { opacity: 0; z-index: 1; }
    50%, 100% { opacity: 1; z-index: 5; }
}

.auth-form {
    background: var(--mx-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 46px;
    height: 100%;
    text-align: center;
    overflow-y: auto;
}

/* 帳密表單獨立成 flex 容器，欄位才會撐滿面板寬度 */
.auth-inner-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.auth-form h1 {
    font-weight: 700;
    margin: 0 0 10px;
    font-size: 26px;
    color: var(--mx-green);
    text-shadow: 0 0 8px var(--mx-glow);
    letter-spacing: 1px;
}

.brand {
    color: var(--mx-dim);
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.brand .cursor {
    color: var(--mx-green);
    animation: mx-blink 1s steps(2, start) infinite;
}

@keyframes mx-blink {
    to { visibility: hidden; }
}

.hint {
    font-size: 12px;
    color: var(--mx-dim);
    margin: 4px 0 10px;
}

.auth-input {
    background: var(--mx-bg);
    color: var(--mx-green);
    caret-color: var(--mx-green);
    border: 1px solid var(--mx-green);
    padding: 13px 18px;
    margin: 6px 0;
    width: 100%;
    border-radius: 999px;
    outline: none;
    font-size: 14px;
    font-family: var(--mx-font);
    box-sizing: border-box;
    transition: box-shadow 0.2s, border-color 0.2s;
    display: block;
}

.auth-input::placeholder {
    color: var(--mx-dim);
    opacity: 1;
}

.auth-input:focus {
    border-color: var(--mx-green);
    box-shadow: 0 0 0 1px var(--mx-green), 0 0 14px var(--mx-glow);
}

/* Chrome 自動填入的白底黃字很破壞風格：把它壓回黑底綠字 */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--mx-green);
    -webkit-box-shadow: 0 0 0 1000px var(--mx-bg) inset;
    transition: background-color 9999s ease-in-out 0s;
}

/* 密碼欄位 + 眼睛切換 */
.pw-field {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0;
    align-self: stretch;
}

.pw-field .auth-input {
    padding-right: 46px;
    margin: 0;
}

.pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--mx-dim);
    line-height: 0;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
    z-index: 5;
}

.pw-toggle:hover {
    color: var(--mx-green);
    background: rgba(0, 255, 65, 0.12);
}

.pw-toggle:focus-visible {
    outline: 1px solid var(--mx-green);
    outline-offset: 2px;
}

.pw-toggle .icon-hide { display: none; }
.pw-toggle.is-visible .icon-show { display: none; }
.pw-toggle.is-visible .icon-hide { display: inline; }

.remember-row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    color: var(--mx-dim);
    margin: 8px 0 10px;
}

.remember-row label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;
}

.remember-row input[type="checkbox"] {
    accent-color: var(--mx-green);
    width: 14px;
    height: 14px;
    margin: 0;
}

/* 錯誤：紅字 + 左側紅線，底色維持黑 */
.error-banner {
    background: rgba(255, 77, 79, 0.06);
    color: var(--mx-danger);
    border: 1px solid rgba(255, 77, 79, 0.5);
    border-left: 3px solid var(--mx-danger);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

.error-banner ul {
    margin: 0;
    padding-left: 18px;
    list-style: square;
}

.text-danger { color: var(--mx-danger); }

/* ---- 按鈕：綠框透明底，hover 填綠字轉黑 ---- */

.btn-primary-pill {
    border-radius: 999px;
    border: 1px solid var(--mx-green);
    background: transparent;
    color: var(--mx-green);
    font-family: var(--mx-font);
    font-size: 13px;
    font-weight: 700;
    padding: 13px 45px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.08s ease-in, box-shadow 0.2s, background 0.2s, color 0.2s;
    margin-top: 8px;
}

.btn-primary-pill:hover,
.btn-primary-pill:focus-visible {
    background: var(--mx-green);
    color: var(--mx-bg);
    box-shadow: 0 0 18px var(--mx-glow);
    outline: none;
}

.btn-primary-pill:active {
    transform: scale(0.97);
}

/* overlay（綠底）上的幽靈按鈕：黑框黑字，hover 填黑字轉綠 */
.btn-ghost-pill {
    border-radius: 999px;
    border: 1px solid var(--mx-bg);
    background: transparent;
    color: var(--mx-bg);
    font-family: var(--mx-font);
    font-size: 13px;
    font-weight: 700;
    padding: 13px 45px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.08s ease-in, background 0.2s, color 0.2s;
}

.btn-ghost-pill:hover,
.btn-ghost-pill:focus-visible {
    background: var(--mx-bg);
    color: var(--mx-green);
    outline: none;
}

.btn-ghost-pill:active {
    transform: scale(0.97);
}

/* ---- Overlay（綠底黑字滑動面板：黑本體上反白，才區隔得開）---- */

.auth-container .overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.auth-container.right-panel-active .overlay-container {
    transform: translateX(-100%);
}

.auth-container .overlay {
    background: var(--mx-green);
    color: var(--mx-bg);
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.auth-container.right-panel-active .overlay {
    transform: translateX(50%);
}

/* 內側的圓弧光暈 + 掃描線 */
.auth-container .overlay::before,
.auth-container .overlay::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 140%;
    height: 140%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-container .overlay::before { left: -20%; }
.auth-container .overlay::after { right: -20%; }

.auth-container .overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.08) 0px,
        rgba(0, 0, 0, 0.08) 1px,
        transparent 1px,
        transparent 3px
    );
}

.auth-container .overlay-panel h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: 1px;
}

.overlay-panel .overlay-glyph {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 14px;
    letter-spacing: -2px;
}

.overlay-panel .overlay-desc {
    font-size: 14px;
    line-height: 1.6;
    margin: 8px 0;
    max-width: 320px;
    opacity: 0.92;
}

.overlay-panel .overlay-features {
    font-size: 13px;
    line-height: 1.9;
    margin: 8px 0 18px;
    text-align: left;
    max-width: 280px;
    opacity: 0.9;
}

.auth-container .overlay-left {
    transform: translateX(-20%);
    left: 0;
}

.auth-container .overlay-right {
    right: 0;
    transform: translateX(0);
}

.auth-container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.auth-container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

/* ---- 手機：overlay 收起來，改用文字連結切換，面板上下滑 ---- */

.mobile-toggle-row { display: none; }

@media (max-width: 768px) {
    .auth-wrapper { padding: 0; }
    .auth-container { min-height: 100vh; min-height: 100dvh; border-radius: 0; border-left: none; border-right: none; }
    .auth-form { padding: 32px 24px; }

    .auth-container .form-container { width: 100%; }

    .auth-container .sign-up-container {
        top: 100%;
        opacity: 1;
        transition: transform 0.5s;
    }
    .auth-container.right-panel-active .sign-up-container {
        transform: translateY(-100%);
        animation: none;
    }
    .auth-container.right-panel-active .sign-in-container {
        transform: translateY(-100%);
    }
    .auth-container .overlay-container { display: none; }

    .mobile-toggle-row {
        display: block;
        width: 100%;
        margin-top: 14px;
        font-size: 13px;
        color: var(--mx-dim);
    }
    .mobile-toggle-row a {
        color: var(--mx-green);
        font-weight: 600;
    }
}

/* ---- 單卡（註冊成功 / AccessDenied / ResetPassword / Logout fallback）---- */

.auth-simple-card {
    background: var(--mx-panel);
    border-radius: 12px;
    border: 1px solid var(--mx-green);
    box-shadow: 0 0 24px var(--mx-glow), inset 0 0 40px rgba(0, 255, 65, 0.04);
    padding: 48px 44px;
    max-width: 460px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.auth-simple-card h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--mx-green);
    text-shadow: 0 0 8px var(--mx-glow);
    letter-spacing: 1px;
    margin: 12px 0;
}

.auth-simple-card h1.text-danger {
    color: var(--mx-danger);
    text-shadow: 0 0 8px rgba(255, 77, 79, 0.35);
}

.auth-simple-card p {
    color: var(--mx-dim);
    font-size: 14px;
    line-height: 1.7;
}

.auth-simple-card p strong {
    color: var(--mx-green);
    font-weight: 600;
}

.auth-simple-card .btn-primary-pill {
    display: inline-block;
    text-decoration: none;
    margin-top: 16px;
}

.auth-simple-card .auth-inner-form {
    margin-top: 8px;
}

.auth-simple-card .auth-inner-form .btn-primary-pill {
    margin-top: 14px;
}

.auth-card-form { max-width: 440px; }

.auth-card-danger {
    border-color: var(--mx-danger);
    box-shadow: 0 0 24px rgba(255, 77, 79, 0.25), inset 0 0 40px rgba(255, 77, 79, 0.04);
}

.mono-block {
    text-align: left;
    font-size: 13px;
    line-height: 1.8;
    white-space: nowrap;
    overflow-x: auto;
    padding: 10px 14px;
    border: 1px dashed var(--mx-dim);
    border-radius: 4px;
    color: var(--mx-green) !important;
}

.card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.link-dim {
    color: var(--mx-dim);
    font-size: 12px;
    text-decoration: none;
    border-bottom: 1px dotted var(--mx-dim);
}

.link-dim:hover { color: var(--mx-green); border-bottom-color: var(--mx-green); }

/* ACCESS DENIED 標題的 glitch 效果 */
.glitch {
    position: relative;
    color: var(--mx-danger) !important;
    text-shadow: 0 0 8px rgba(255, 77, 79, 0.35) !important;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    color: var(--mx-green);
    background: var(--mx-panel);
    clip-path: inset(0 0 0 0);
    opacity: 0;
}

.glitch::before { animation: mx-glitch-a 3s infinite linear alternate-reverse; }
.glitch::after  { animation: mx-glitch-b 2.5s infinite linear alternate-reverse; }

@keyframes mx-glitch-a {
    0%, 92% { opacity: 0; }
    93% { opacity: 1; clip-path: inset(10% 0 60% 0); transform: translate(-3px, 0); }
    95% { clip-path: inset(50% 0 20% 0); transform: translate(3px, 0); }
    97% { clip-path: inset(70% 0 5% 0); transform: translate(-2px, 0); }
    100% { opacity: 0; }
}

@keyframes mx-glitch-b {
    0%, 85% { opacity: 0; }
    86% { opacity: 1; clip-path: inset(40% 0 40% 0); transform: translate(3px, 0); }
    88% { clip-path: inset(5% 0 80% 0); transform: translate(-3px, 0); }
    90% { clip-path: inset(80% 0 2% 0); transform: translate(2px, 0); }
    100% { opacity: 0; }
}

/* ---- 減少動態：關掉所有動畫 / 轉場（背景數位雨由 JS 自己判斷不動）---- */
@media (prefers-reduced-motion: reduce) {
    .auth-container .form-container,
    .auth-container .overlay-container,
    .auth-container .overlay,
    .auth-container .overlay-panel {
        transition: none !important;
    }
    .auth-container.right-panel-active .sign-up-container { animation: none; }
    .brand .cursor,
    .glitch::before,
    .glitch::after {
        animation: none !important;
    }
}