/* ============================================================
   貓貓谷 登入頁 + 註冊彈窗 美工改版（2026-10-25）
   - 只改外觀：顏色、間距、尺寸。不改任何 HTML、id、name、JS、表單送出流程。
   - 配色沿用首頁 meow-home-v2 的深藍／淺色兩套色票。
   - 範圍：signin.php 的 .auth-section，與 #register-modal（註冊彈窗）。
     其他頁面、後台、聊天室、其他彈窗不受影響。
   - 移除方式：刪掉 header.php 裡引用本檔的那一行即可完全還原。
   ============================================================ */

/* ---------- 色票：預設深色（與首頁相同） ---------- */
html body .auth-section,
html body #register-modal {
    --ar-bg: #0b1421;
    --ar-panel: #111e2d;
    --ar-panel-2: #142436;
    --ar-input: #0d1826;
    --ar-ink: #edf4fd;
    --ar-muted: #8d9db2;
    --ar-faint: #64788f;
    --ar-line: rgba(255, 255, 255, 0.07);
    --ar-line-strong: rgba(255, 255, 255, 0.13);
    --ar-blue: #61b5ff;
    --ar-primary: #62baff;
    --ar-primary-hover: #7cc6ff;
    --ar-primary-ink: #0b2741;
    --ar-ring: rgba(97, 181, 255, 0.22);
    --ar-info-bg: rgba(97, 181, 255, 0.08);
    --ar-info-line: rgba(97, 181, 255, 0.24);
    --ar-info-ink: #a9d6ff;
    --ar-warn-bg: rgba(255, 128, 115, 0.08);
    --ar-warn-line: rgba(255, 128, 115, 0.28);
    --ar-warn-ink: #ffc3bb;
    --ar-warn-strong: #ff9c90;
    --ar-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
}

/* ---------- 色票：淺色模式（與首頁淺色相同） ---------- */
html[data-meow-theme="light"] body .auth-section,
html[data-meow-theme="light"] body #register-modal {
    --ar-bg: #f3f7fb;
    --ar-panel: #ffffff;
    --ar-panel-2: #f5f8fc;
    --ar-input: #ffffff;
    --ar-ink: #253b51;
    --ar-muted: #74879a;
    --ar-faint: #8e9fb0;
    --ar-line: rgba(35, 64, 90, 0.08);
    --ar-line-strong: rgba(35, 64, 90, 0.16);
    --ar-blue: #328acc;
    --ar-primary: #438fcc;
    --ar-primary-hover: #337bb4;
    --ar-primary-ink: #ffffff;
    --ar-ring: rgba(67, 143, 204, 0.2);
    --ar-info-bg: #eef6fd;
    --ar-info-line: #cfe3f5;
    --ar-info-ink: #2e6f9e;
    --ar-warn-bg: #fff4f2;
    --ar-warn-line: #f2c4bd;
    --ar-warn-ink: #8a3a2e;
    --ar-warn-strong: #b3452f;
    --ar-shadow: 0 10px 32px rgba(32, 67, 96, 0.08);
}


/* ============================================================
   一、登入頁 signin.php
   ============================================================ */

/* 整體區塊：縮小上下留白，讓兩個框在一般螢幕內完整顯示 */
html body .auth-section {
    padding: 16px 0 28px;
    min-height: calc(100vh - 82px);
    min-height: calc(100dvh - 82px);
    box-sizing: border-box;
}

html body .auth-section .auth-container {
    max-width: 920px;
    padding: 0 20px;
}

html body .auth-section .auth-shell {
    grid-template-columns: minmax(0, 340px) minmax(0, 500px);
    justify-content: center;
    gap: 20px;
    align-items: stretch;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* 左側品牌框：去掉咖啡色＋金框，改成首頁深藍卡片 */
html body .auth-section .auth-brand-panel {
    border-radius: 16px;
    padding: 32px 28px;
    border: 1px solid var(--ar-line-strong);
    background:
        radial-gradient(circle at 30% 12%, rgba(97, 181, 255, 0.16), transparent 58%),
        radial-gradient(circle at 85% 90%, rgba(113, 213, 176, 0.10), transparent 55%),
        var(--ar-panel-2);
    box-shadow: var(--ar-shadow);
}

html body .auth-section .auth-brand-panel::before,
html body .auth-section .auth-brand-panel::after {
    display: none;
}

html body .auth-section .auth-brand-content {
    color: var(--ar-ink);
}

html body .auth-section .auth-brand-logo {
    height: 64px;
    margin-bottom: 18px;
}

html body .auth-section .auth-brand-title {
    font-size: 22px;
    line-height: 1.5;
    margin: 0 0 10px;
    color: var(--ar-ink) !important;
    text-shadow: none;
}

html body .auth-section .auth-brand-desc {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 22px;
    color: var(--ar-muted);
    opacity: 1;
}

html body .auth-section .auth-brand-features {
    gap: 10px;
}

html body .auth-section .auth-brand-features li {
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--ar-line);
    border: 1px solid var(--ar-line-strong);
    color: var(--ar-ink);
}

html body .auth-section .auth-brand-features i {
    color: var(--ar-blue);
}

/* 右側登入卡片 */
html body .auth-section .auth-card {
    background: var(--ar-panel) !important;
    border: 1px solid var(--ar-line-strong) !important;
    border-radius: 16px;
    padding: 24px 32px 20px;
    box-shadow: var(--ar-shadow) !important;
    backdrop-filter: none;
    color: var(--ar-ink) !important;
}

html body .auth-section .auth-header {
    margin-bottom: 16px;
}

html body .auth-section .auth-title {
    font-size: 24px;
    line-height: 1.35;
    margin: 0 0 4px;
    color: var(--ar-ink) !important;
}

html body .auth-section .auth-title i {
    color: var(--ar-blue);
    margin-right: 8px;
}

html body .auth-section .auth-subtitle {
    font-size: 14px;
    margin: 0;
    color: var(--ar-muted) !important;
}

html body .auth-section .auth-trust-notice {
    margin: 14px 0 0;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 10px;
    background: var(--ar-info-bg) !important;
    border: 1px solid var(--ar-info-line) !important;
    color: var(--ar-info-ink) !important;
}

html body .auth-section .auth-trust-notice strong {
    color: var(--ar-ink);
}

/* Discord 綁定提示（只有特定情況出現）：縮小外距 */
html body .auth-section .auth-card > .alert.alert-info {
    margin-bottom: 16px !important;
    border-radius: 12px;
}

/* 表單：拿掉重複的欄位間距（原本 margin 24px + gap 16px 疊在一起） */
html body .auth-section .auth-form {
    margin-bottom: 16px;
}

html body .auth-section .auth-grid {
    max-width: none;
    gap: 16px;
}

html body .auth-section .auth-left,
html body .auth-section .auth-right {
    gap: 14px;
}

html body .auth-section #login-form .form-group {
    margin: 0;
}

html body .auth-section #login-form .form-label {
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--ar-ink) !important;
}

html body .auth-section #login-form .form-label i {
    color: var(--ar-blue);
}

html body .auth-section #login-form .form-input {
    height: 46px;
    min-height: 46px;
    padding: 0 14px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid var(--ar-line-strong) !important;
    background: var(--ar-input) !important;
    color: var(--ar-ink) !important;
    box-shadow: none;
}

html body .auth-section #login-form .form-input::placeholder {
    color: var(--ar-faint) !important;
}

html body .auth-section #login-form .form-input:focus {
    border-color: var(--ar-blue) !important;
    box-shadow: 0 0 0 3px var(--ar-ring) !important;
    outline: none;
}

html body .auth-section #login-form .form-input.error {
    border-color: #ff8073 !important;
}

/* 記住我：勾選框與文字並排，不再被擠成窄條 */
html body .auth-section #login-form .form-checkbox {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
}

html body .auth-section #login-form .form-checkbox input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--ar-primary);
}

html body .auth-section #login-form .form-checkbox label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ar-ink) !important;
    letter-spacing: 0.02em;
}

html body .auth-section #login-form .form-checkbox label small {
    display: inline-block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--ar-muted) !important;
}

/* 按鈕 */
html body .auth-section .auth-actions {
    gap: 12px;
}

html body .auth-section .auth-btn {
    height: 48px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    background: var(--ar-primary);
    color: var(--ar-primary-ink);
    box-shadow: 0 4px 18px rgba(41, 146, 240, 0.18);
}

html body .auth-section .auth-btn:hover {
    background: var(--ar-primary-hover);
    box-shadow: 0 6px 22px rgba(41, 146, 240, 0.28);
}

html body .auth-section .auth-btn:disabled {
    background: var(--ar-panel-2) !important;
    color: var(--ar-faint) !important;
    border-color: var(--ar-line-strong) !important;
    box-shadow: none;
}

html body .auth-section .discord-btn {
    height: 48px;
    border-radius: 10px;
    font-size: 15px;
}

html body .auth-section .auth-right .auth-divider {
    margin: 0;
    line-height: 16px;
    color: var(--ar-faint);
}

html body .auth-section .auth-divider::before {
    background: var(--ar-line-strong);
}

html body .auth-section .auth-divider span {
    background: var(--ar-panel) !important;
    color: var(--ar-faint) !important;
    border: 0 !important;
    font-size: 12px;
    padding: 0 10px;
}

html body .auth-section .auth-links {
    margin: 0;
}

html body .auth-section .auth-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 14px;
    line-height: 1.2;
    border-radius: 10px;
    border: 1px solid var(--ar-line-strong) !important;
    background: transparent !important;
    color: var(--ar-ink) !important;
    font-size: 14px;
}

html body .auth-section .auth-link-btn:hover {
    border-color: var(--ar-blue) !important;
    color: var(--ar-blue) !important;
    background: var(--ar-info-bg) !important;
}

/* Discord 社群：壓成一行的小橫條 */
html body .auth-section .auth-discord-community {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(88, 101, 242, 0.10) !important;
    border: 1px solid rgba(88, 101, 242, 0.30) !important;
    color: var(--ar-ink) !important;
    gap: 12px;
}

html body .auth-section .auth-discord-icon-wrap {
    width: 32px;
    height: 32px;
}

html body .auth-section .auth-discord-icon-wrap > i {
    font-size: 22px;
    color: #8c96ff;
}

html body .auth-section .auth-discord-community-info {
    gap: 10px;
}

html body .auth-section .auth-discord-community-info strong {
    font-size: 14px;
    margin-bottom: 0;
    color: var(--ar-ink) !important;
}

html body .auth-section .auth-discord-community-info p {
    font-size: 12px;
    line-height: 1.4;
    color: var(--ar-muted) !important;
}

html body .auth-section .auth-discord-community-btn {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 9px;
}

/* 底部 */
html body .auth-section .auth-footer,
html body .auth-section .auth-footer p {
    font-size: 13px;
    margin: 0;
    color: var(--ar-muted) !important;
}

html body .auth-section .auth-footer .link {
    color: var(--ar-blue) !important;
}

html body .auth-section .auth-loading {
    border-radius: 16px;
    background: color-mix(in srgb, var(--ar-panel) 92%, transparent) !important;
    color: var(--ar-ink) !important;
}

html body .auth-section .loading-spinner {
    border-color: var(--ar-ring);
    border-top-color: var(--ar-blue);
}

/* 平板：隱藏左側品牌框（原本就會隱藏），登入卡置中 */
@media (max-width: 992px) {
    html body .auth-section .auth-shell {
        grid-template-columns: minmax(0, 520px);
    }
}

/* 手機 */
@media (max-width: 768px) {
    html body .auth-section {
        padding: 16px 0 28px;
        min-height: 0;
    }

    html body .auth-section .auth-container {
        padding: 0 12px;
    }

    html body .auth-section .auth-card {
        margin: 0;
        padding: 22px 18px 20px;
        border-radius: 14px;
    }

    html body .auth-section .auth-title {
        font-size: 22px;
    }

    html body .auth-section .auth-discord-community {
        padding: 12px;
    }
}

/* 窄螢幕（例如摺疊機外螢幕） */
@media (max-width: 380px) {
    html body .auth-section .auth-container {
        padding: 0 8px;
    }

    html body .auth-section .auth-card {
        padding: 18px 14px 16px;
    }

    html body .auth-section .auth-title {
        font-size: 20px;
    }

    html body .auth-section .auth-trust-notice {
        font-size: 12px;
    }
}


/* ============================================================
   二、註冊彈窗 #register-modal（includes/register-modal.html）
   ============================================================ */

/* 遮罩：上方預留導覽列高度，彈窗頂端不再被導覽列蓋住 */
html body #register-modal {
    padding: 90px 20px 20px;
    background: rgba(5, 10, 18, 0.72);
    backdrop-filter: blur(6px);
    color: var(--ar-ink);
}

html body #register-modal .modal-container {
    max-width: 500px;
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    background: var(--ar-panel) !important;
    color: var(--ar-ink) !important;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--ar-line-strong) !important;
}

/* 原本深色模式把 header/body/footer 各自上了不同底色與陰影，統一拿掉 */
html body #register-modal :is(.modal-step, .modal-form, .modal-header, .modal-body, .modal-footer) {
    background: transparent !important;
    box-shadow: none !important;
}

html body #register-modal .modal-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 22px;
    background: var(--ar-line) !important;
    color: var(--ar-muted) !important;
}

html body #register-modal .modal-close:hover {
    background: rgba(255, 128, 115, 0.18) !important;
    color: var(--ar-ink) !important;
}

/* 步驟條：從 102px 壓到約 72px */
html body #register-modal .modal-progress {
    padding: 12px 20px 8px;
    border-bottom: 1px solid var(--ar-line-strong) !important;
}

html body #register-modal .modal-progress-step {
    gap: 4px;
}

html body #register-modal .step-number {
    width: 28px;
    height: 28px;
    font-size: 13px;
    border: 2px solid var(--ar-line-strong) !important;
    background: var(--ar-panel-2) !important;
    color: var(--ar-muted) !important;
    box-shadow: none !important;
}

html body #register-modal .modal-progress-step.active .step-number {
    background: var(--ar-primary) !important;
    border-color: var(--ar-primary) !important;
    color: var(--ar-primary-ink) !important;
}

html body #register-modal .modal-progress-step.completed .step-number {
    background: #3faa8b !important;
    border-color: #3faa8b !important;
    color: #ffffff !important;
}

html body #register-modal .step-label {
    font-size: 11px;
    color: var(--ar-muted) !important;
}

html body #register-modal .modal-progress-step.active .step-label {
    color: var(--ar-ink) !important;
}

html body #register-modal .modal-progress-line {
    width: 48px;
    height: 2px;
    top: -10px;
    background: var(--ar-line-strong) !important;
}

/* 內容區 */
html body #register-modal .modal-step {
    padding: 20px 28px 22px;
}

html body #register-modal .modal-header {
    margin-bottom: 14px;
}

html body #register-modal .modal-title {
    font-size: 22px;
    margin: 0 0 4px;
    color: var(--ar-ink) !important;
}

html body #register-modal .modal-subtitle {
    font-size: 13px;
    margin: 0;
    color: var(--ar-muted) !important;
}

html body #register-modal .modal-subtitle strong {
    color: var(--ar-blue) !important;
}

/* 紅色 PC 提示：字距調回正常，桌面版從 104px 縮到 58px */
html body #register-modal .modal-pc-notice {
    margin: 12px 0 0;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.55;
    letter-spacing: 0;
    border-radius: 10px;
    background: var(--ar-warn-bg) !important;
    border: 1px solid var(--ar-warn-line) !important;
    color: var(--ar-warn-ink) !important;
}

html body #register-modal .modal-pc-notice i,
html body #register-modal .modal-pc-notice strong,
html body #register-modal .modal-launcher-notice {
    color: var(--ar-warn-strong) !important;
}

html body #register-modal .modal-launcher-notice {
    margin-top: 2px;
    line-height: 1.55;
}

/* 表單：拿掉重複間距（原本 gap 20px + 每欄 margin 24px） */
html body #register-modal .modal-form {
    gap: 14px;
}

html body #register-modal .form-group {
    margin: 0;
    gap: 6px;
}

html body #register-modal .form-group label {
    font-size: 13px;
    color: var(--ar-ink) !important;
}

html body #register-modal .form-group input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 44px;
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid var(--ar-line-strong) !important;
    background: var(--ar-input) !important;
    color: var(--ar-ink) !important;
    box-shadow: none !important;
}

html body #register-modal .form-group input.code-input {
    height: 52px;
    font-size: 22px;
}

html body #register-modal .form-group input::placeholder {
    color: var(--ar-faint) !important;
}

html body #register-modal .form-group input:focus {
    border-color: var(--ar-blue) !important;
    box-shadow: 0 0 0 3px var(--ar-ring) !important;
}

html body #register-modal .form-hint {
    font-size: 12px;
    font-style: normal;
    line-height: 1.4;
    color: var(--ar-muted) !important;
}

html body #register-modal .modal-error {
    border-radius: 8px;
    font-size: 13px;
}

/* 按鈕 */
html body #register-modal .modal-btn {
    min-height: 46px;
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 10px;
}

html body #register-modal .modal-btn-primary {
    background: var(--ar-primary) !important;
    color: var(--ar-primary-ink) !important;
    box-shadow: 0 4px 18px rgba(41, 146, 240, 0.18);
}

html body #register-modal .modal-btn-primary:hover {
    background: var(--ar-primary-hover) !important;
    box-shadow: 0 6px 22px rgba(41, 146, 240, 0.28);
}

html body #register-modal .modal-btn-primary:disabled {
    background: var(--ar-panel-2) !important;
    color: var(--ar-faint) !important;
    box-shadow: none;
    transform: none;
}

html body #register-modal .modal-btn-secondary {
    background: var(--ar-panel-2) !important;
    color: var(--ar-ink) !important;
    border: 1px solid var(--ar-line-strong) !important;
}

html body #register-modal .modal-btn-secondary:hover {
    border-color: var(--ar-blue) !important;
    background: var(--ar-info-bg) !important;
}

/* 底部「已有帳號？立即登入」 */
html body #register-modal .modal-footer {
    margin-top: 14px;
    padding-top: 6px;
    border-top: 1px solid var(--ar-line-strong) !important;
}

html body #register-modal .modal-footer-text {
    font-size: 13px;
    margin: 0;
    color: var(--ar-muted) !important;
}

html body #register-modal .modal-link {
    min-height: 40px;
    color: var(--ar-blue) !important;
}

/* 註冊完成步驟 */
html body #register-modal .modal-success-icon {
    width: 56px;
    height: 56px;
    font-size: 30px;
    margin-bottom: 14px;
    background: #3faa8b !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(63, 170, 139, 0.3);
}

html body #register-modal .account-save-kit {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--ar-line-strong) !important;
    background: var(--ar-panel-2) !important;
    color: var(--ar-ink) !important;
}

html body #register-modal :is(.account-save-kit h3, .account-save-details dt,
    .account-save-details dd, .account-password-option, .action-content h3) {
    color: var(--ar-ink) !important;
}

html body #register-modal :is(.account-save-intro, .account-save-location,
    .account-save-status, .action-content p) {
    color: var(--ar-muted) !important;
}

html body #register-modal .account-save-details > div {
    border-bottom-color: var(--ar-line-strong) !important;
}

html body #register-modal .account-save-details a {
    color: var(--ar-blue) !important;
}

html body #register-modal .account-password-option input {
    accent-color: var(--ar-primary);
}

html body #register-modal .account-password-warning {
    color: var(--ar-warn-strong) !important;
}

html body #register-modal .account-save-buttons .modal-btn-primary {
    color: var(--ar-primary-ink) !important;
}

html body #register-modal #account-copy-text {
    border: 1px solid var(--ar-line-strong) !important;
    background: var(--ar-input) !important;
    color: var(--ar-ink) !important;
}

html body #register-modal .modal-actions {
    gap: 10px;
    margin-bottom: 16px;
}

html body #register-modal .modal-action-card {
    padding: 12px 14px;
    gap: 12px;
    border: 1px solid var(--ar-line-strong) !important;
    background: var(--ar-panel-2) !important;
    color: var(--ar-ink) !important;
}

html body #register-modal .modal-action-card:hover {
    border-color: var(--ar-blue) !important;
    box-shadow: 0 4px 14px rgba(41, 146, 240, 0.15);
}

html body #register-modal .action-icon {
    font-size: 26px;
}

html body #register-modal .action-content h3 {
    font-size: 15px;
}

html body #register-modal :is(button, a, input, textarea):focus-visible {
    outline: 2px solid var(--ar-blue) !important;
    outline-offset: 2px;
}

/* 手機：維持原本的全螢幕彈窗，只調整間距 */
@media (max-width: 576px) {
    html body #register-modal {
        padding: 0;
    }

    html body #register-modal .modal-container {
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        box-shadow: none !important;
    }

    html body #register-modal .modal-progress {
        padding: 12px 16px 8px;
    }

    html body #register-modal .modal-step {
        padding: 16px 16px 20px;
    }

    html body #register-modal .modal-title {
        font-size: 20px;
    }

    html body #register-modal .modal-pc-notice {
        font-size: 12px;
    }
}