/* ==========================================================================
   学习资源 · 登录闸门（唯一权威样式，2026-10-20 重写）
   --------------------------------------------------------------------------
   背景：v4.css 里 .gate-* 被历代补丁覆盖了约 20 次，其中 .gate-panel 仍是
   「左侧品牌区 + 右侧表单」的双栏 grid，而页面里徽章与口号已删除，只剩
   .gate-top 与 .gate-main 两个子元素 —— 于是标题占左栏、表单被挤进右栏，
   再叠加 .gate-panel{overflow:hidden}，登录按钮直接被裁掉看不见。

   本文件在 v4.css 之后加载，用单栏 flex 重排，并保证：
     1) 任何屏幕尺寸下「登 录 / 退 出」按钮都完整可见，绝不被裁切；
     2) 内容高于视口时可滚动，顶部不会被居中逻辑顶出屏幕；
     3) 视觉延续深蓝科技风：玻璃输入框 + 青紫渐变主按钮。
   ========================================================================== */

/* ---- 1. 闸门容器：铺满导航以下区域，内部可滚动 ---- */
#gateSection {
    position: fixed !important;
    top: var(--nav-h, 64px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: 900 !important;
    display: block !important;          /* 关键：不再用 flex 居中，避免溢出裁切 */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    -webkit-overflow-scrolling: touch;
}

#gateSection .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 100% !important;        /* 内容少时撑满、内容多时自然增高 */
    padding: 40px 20px 44px !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   关键修复：本文件前面把 #gateSection 设成了 display:block!important，
   而 HTML 的 hidden 属性靠浏览器默认的 display:none 生效，
   会被上面这些规则盖掉 —— 结果登录框永远隐藏不掉，一直盖在文件空间上面。
   这里显式声明：带 hidden 属性时必须真正隐藏（对登录框和文件空间都生效）。
   ========================================================================== */
#gateSection[hidden],
#spaceSection[hidden] {
    display: none !important;
}

/* 扫描光带会把绝对定位的伪元素顶出容器，凭空多出一条滚动条，这里关掉 */
#gateSection::after { display: none !important; }

/* ---- 2. 面板：单栏纵向排布，绝不裁切 ---- */
#gateSection .gate-panel {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;   /* 清掉遗留的双栏 grid */
    width: 100% !important;
    max-width: 384px !important;
    margin: auto !important;                  /* 空间富余时垂直居中，溢出时贴顶可滚 */
    padding: 34px 30px 30px !important;
    box-sizing: border-box !important;
    overflow: visible !important;             /* 关键：不再裁掉按钮 */
    background: rgba(10, 20, 56, .55) !important;
    border: 1px solid rgba(34, 211, 238, .24) !important;
    border-radius: 16px !important;
    box-shadow:
        0 28px 70px rgba(2, 8, 30, .5),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    position: relative;
}

/* 面板内的每一块都按内容高度排布，不被压缩 */
#gateSection .gate-panel > * { flex: 0 0 auto; }

/* ---- 3. 标题 ---- */
#gateSection .gate-top {
    margin: 0 0 26px !important;
    padding: 0 !important;
    text-align: center !important;
}

#gateSection .gate-brand {
    margin: 0 !important;
    font-size: 1.86rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 6px !important;
    text-indent: 6px !important;
    background: linear-gradient(180deg, #ffffff 34%, #a5e8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 3px 20px rgba(34, 211, 238, .38));
}

/* ---- 4. 表单与字段：标签在上、输入框在下 ---- */
#gateSection .gate-main {
    padding: 0 !important;
    width: 100% !important;
}

#gateSection .gate-form {
    width: 100% !important;
    text-align: left !important;
    display: block !important;
}

#gateSection .gate-field {
    display: block !important;          /* 不再与 58px 标签挤在同一行 */
    margin: 0 0 15px !important;
}

#gateSection .gate-field > label {
    display: block !important;
    width: auto !important;
    flex: none !important;
    margin: 0 0 7px !important;
    text-align: left !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    color: rgba(165, 232, 255, .82) !important;
    white-space: normal !important;
}

#gateSection .gate-field > .gate-input-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 48px !important;
    padding: 0 10px 0 13px !important;
    box-sizing: border-box !important;
    background: rgba(9, 18, 48, .52) !important;
    border: 1px solid rgba(34, 211, 238, .28) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: border-color .18s, background .18s, box-shadow .18s;
}

#gateSection .gate-input-wrap:hover {
    background: rgba(9, 18, 48, .64) !important;
    border-color: rgba(34, 211, 238, .5) !important;
}

#gateSection .gate-input-wrap:focus-within {
    background: rgba(9, 18, 48, .76) !important;
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .16) !important;
}

#gateSection .gate-input-wrap input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    font-size: .98rem !important;
    color: #eaf6ff !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
}

#gateSection .gate-input-wrap input::placeholder { color: rgba(203, 226, 255, .42) !important; }

#gateSection .gate-icon {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    color: rgba(34, 211, 238, .7) !important;
}

#gateSection .gate-eye {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: rgba(34, 211, 238, .68) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    cursor: pointer;
    overflow: visible !important;
}
#gateSection .gate-eye:hover {
    color: #22d3ee !important;
    background: rgba(34, 211, 238, .14) !important;
}
#gateSection .gate-eye svg { display: block; width: 17px; height: 17px; }

/* ---- 5. 保持登录 ---- */
#gateSection .gate-remember {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 2px 0 20px !important;
    cursor: pointer;
}
#gateSection .gate-remember input {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    accent-color: #22d3ee !important;
    flex: 0 0 15px;
}
#gateSection .gate-remember span {
    font-size: .84rem !important;
    color: rgba(224, 242, 254, .88) !important;
    white-space: nowrap;
}
#gateSection .gate-remember em { display: none !important; }

/* ---- 6. 按钮：两列等宽，永不被裁 ---- */
#gateSection .gate-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}

#gateSection .gate-actions .gate-btn,
#gateSection .gate-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-indent: 3px !important;
    border-radius: 8px !important;
    cursor: pointer;
    white-space: nowrap !important;
    transition: transform .16s, box-shadow .16s, filter .16s, background .16s, border-color .16s, color .16s;
}

#gateSection .gate-btn-submit {
    background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 52%, #7c5cff 100%) !important;
    color: #061033 !important;
    border: 0 !important;
    box-shadow: 0 8px 22px rgba(34, 211, 238, .3) !important;
}
#gateSection .gate-btn-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(34, 211, 238, .42) !important;
}
#gateSection .gate-btn-submit:active { transform: translateY(0); }
#gateSection .gate-btn-submit:disabled {
    opacity: .62 !important;
    cursor: not-allowed !important;
    transform: none !important;
    filter: none !important;
}

#gateSection .gate-btn-ghost {
    background: rgba(124, 92, 255, .1) !important;
    color: #c4b5fd !important;
    border: 1px solid rgba(124, 92, 255, .5) !important;
    box-shadow: none !important;
}
#gateSection .gate-btn-ghost:hover {
    background: rgba(124, 92, 255, .2) !important;
    border-color: #7c5cff !important;
    color: #ddd6fe !important;
}

/* ---- 7. 错误提示 ---- */
#gateSection .gate-error {
    margin: 14px 0 0 !important;
    padding: 10px 13px !important;
    font-size: .82rem !important;
    line-height: 1.65 !important;
    text-align: left !important;
    border-radius: 8px !important;
    background: rgba(220, 38, 38, .16) !important;
    border: 1px solid rgba(248, 113, 113, .4) !important;
    color: #fca5a5 !important;
}
#gateSection .gate-error[hidden] { display: none !important; }

/* ---- 8. 小屏与矮屏：进一步压缩，保证按钮在首屏 ---- */
@media (max-width: 480px) {
    #gateSection .container { padding: 24px 16px 32px !important; }
    #gateSection .gate-panel { max-width: 100% !important; padding: 28px 22px 26px !important; border-radius: 14px !important; }
    #gateSection .gate-brand { font-size: 1.56rem !important; letter-spacing: 5px !important; text-indent: 5px !important; }
    #gateSection .gate-top { margin-bottom: 22px !important; }
    #gateSection .gate-field > .gate-input-wrap { height: 46px !important; }
    #gateSection .gate-btn { height: 42px !important; letter-spacing: 2px !important; text-indent: 2px !important; }
}

@media (max-height: 660px) {
    #gateSection .container { padding: 20px 16px 24px !important; }
    #gateSection .gate-panel { padding: 24px 24px 22px !important; }
    #gateSection .gate-top { margin-bottom: 18px !important; }
    #gateSection .gate-brand { font-size: 1.5rem !important; }
    #gateSection .gate-field { margin-bottom: 11px !important; }
    #gateSection .gate-remember { margin: 0 0 14px !important; }
    #gateSection .gate-field > .gate-input-wrap { height: 42px !important; }
    #gateSection .gate-btn { height: 40px !important; }
}