@charset "utf-8";
/*!
 * Geotrip —— 登录页样式
 *
 * 内核登录页用的是 float 布局（label 100px + input 200px、dd 宽 300px 浮动），
 * 这里全部重置成块级纵向排布，并统一到与后台皮肤一致的视觉语言。
 * 每条都带 body 前缀，保证覆盖 admin.css 里同名的 float 规则。
 */

:root {
    --gt-primary: #1362fc;
    --gt-primary-dark: #034bd9;
    --gt-primary-soft: #ebf1ff;
    --gt-accent: #16c098;
    --gt-line: #e8eef9;
    --gt-text: #1b2559;
    --gt-muted: #8f9bba;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #eef3ff;
    background-image:
        radial-gradient(900px 480px at 12% -10%, rgba(19, 98, 252, .18), transparent 60%),
        radial-gradient(760px 420px at 92% 8%, rgba(22, 192, 152, .16), transparent 62%),
        linear-gradient(160deg, #f7faff 0%, #eaf1ff 100%);
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    color: var(--gt-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* 顶部深色条只作旧背景，改为透明。表单（#wrapper）就在 .bg 里面，
   而内核给 .bg 设了 position:absolute + z-index:-1000 + height:260px。
   只压 height:0 会得到「负层级 + 零高度」容器，Chrome 把整棵子树排除在命中测试之外，
   表现为输入框看得见却点不进、打不了字。定位与层级必须一起去掉。 */
body .bg {
    position: static;
    z-index: auto;
    height: auto;
    background: transparent !important;
    background-image: none !important;
}

/* 居中容器（内核用的是 id="wrapper"） */
body #wrapper,
body .wrapper {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 8vh 20px 60px;
    box-sizing: border-box;
}

/* 站点标识：内核用白色 logo 图，浅色背景上不可见，所以放一块品牌色底 */
body .logo {
    width: 200px;
    height: 56px;
    margin: 0 auto 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gt-primary) 0%, #4a86ff 100%);
    box-shadow: 0 10px 22px rgba(19, 98, 252, .24);
    overflow: hidden;
}
body .logo img {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: 148px auto;
    background-repeat: no-repeat;
}

/* 登录卡片 */
body .login {
    position: relative;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 30px 30px 26px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(19, 98, 252, .14), 0 2px 6px rgba(19, 98, 252, .06);
    border: 1px solid rgba(255, 255, 255, .8);
}
/* 卡片顶部渐变细条 */
body .login::before {
    content: "";
    position: absolute;
    left: 30px;
    right: 30px;
    top: 0;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--gt-primary), #627eea 55%, var(--gt-accent));
}

/* --- 表单结构重置：内核是 dl/dd 浮动，这里全部改块级 --- */
body .login dl {
    height: auto;
    margin: 0;
    clear: none;
}
body .login dd,
body .login dd.username,
body .login dd.password,
body .login dd.validcode,
body .login dd.submit,
body .login dd.checkbox {
    float: none;
    width: 100%;
    height: auto;
    margin: 0 0 14px;
    padding: 0;
    position: static;
    text-align: left;
}

/* 标签：右对齐浮动改为块级左对齐 */
body .login label {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    color: var(--gt-muted);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .02em;
    text-align: left;
    white-space: normal;
    overflow: visible;
}

/* 输入框：固定 200px + float 改为整行 */
body .login input[type="text"],
body .login input[type="password"] {
    display: block;
    float: none;
    width: 100%;
    height: 46px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid var(--gt-line);
    border-radius: 12px;
    background: #f9fbff;
    color: var(--gt-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 46px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body .login input[type="text"]:hover,
body .login input[type="password"]:hover { border-color: #cfdcfb; }

body .login input[type="text"]:focus,
body .login input[type="password"]:focus {
    outline: none;
    background: #fff;
    border-color: var(--gt-primary);
    box-shadow: 0 0 0 4px rgba(19, 98, 252, .12);
}

/* 验证码：输入框与图片并排，图片不再绝对定位压住输入框 */
body .login dd.validcode {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
body .login dd.validcode label {
    flex: 1 1 100%;
    margin-bottom: 6px;
}
body .login dd.validcode input[type="text"] {
    flex: 1 1 160px;
    width: auto;
}
body .login dd.validcode > img {
    position: static;
    flex: 0 0 auto;
    width: 104px;
    height: 46px;
    border-radius: 10px;
    border: 1px solid var(--gt-line);
    background: #fff;
    cursor: pointer;
    object-fit: cover;
}

/* 记住登录 */
body .login dd.checkbox {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: auto;
    margin: 2px 0 18px;
}
body .login input[type="checkbox"] {
    float: none;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--gt-primary);
}
body .login dd.checkbox label,
body .login input[type="checkbox"] + label {
    display: inline;
    width: auto;
    margin: 0;
    color: var(--gt-muted);
    font-size: 13px;
    font-weight: 500;
}

/* 登录按钮：内核是 float:right + 70px，改为整行 */
body .login dd.submit { margin: 0; }
body .login input.button,
body .login .button {
    display: block;
    float: none;
    width: 100%;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gt-primary) 0%, #3b7bff 100%);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 46px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(19, 98, 252, .26);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body .login input.button:hover,
body .login .button:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(19, 98, 252, .32);
}
body .login input.button:active,
body .login .button:active { transform: translateY(0); }

/* 错误与提示 */
body .login .noteinfo,
body .login .error,
body .login > p {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff4f4;
    border: 1px solid #ffdcdc;
    color: #c0392b;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
    float: none;
    width: auto;
}
body .login .noteinfo a,
body .login > p a { color: #c0392b; font-weight: 700; }

/* 页脚 */
body .footer,
body .copyright {
    margin-top: 22px;
    text-align: center;
    color: var(--gt-muted);
    font-size: 12.5px;
    line-height: 1.8;
}
body .footer a,
body .copyright a { color: var(--gt-muted); text-decoration: none; }
body .footer a:hover { color: var(--gt-primary); }

@media screen and (max-width: 520px) {
    body #wrapper,
    body .wrapper { padding: 5vh 16px 40px; }
    body .login { padding: 24px 20px 20px; border-radius: 16px; }
    body .login::before { left: 20px; right: 20px; }
    body .login dd.validcode > img { width: 92px; height: 44px; }
}