a {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
a:focus {outline: none;text-decoration: none;}
/* ==========================================================================
   针灸推拿学数字教学系统 —— 登录页（居中卡片 + 「素纸 · 星尘」背景）
   设计约束（按反馈定稿）：
     · 登录框居中：页面只有一张卡片，水平垂直都居中，去掉了顶栏与左侧品牌栏；
     · 主体背景色 = 浅麻褐 #D9C8AC，其上只叠一层柔和高光与极缓的斜向渐变；
     · 背景 = 小网格 + 随机粒子：
         · .bg-grid 以 20px 小方格描出暖褐金细网格（每 5 格一道稍重主格线），
           四周用径向 mask 自然淡出，不与屏幕边缘硬碰；
         · canvas 绘制随机飘过的粒子（金 / 青 / 白微尘 + 少量带气晕的亮尘），
           详见 login-acupoint.js；
     · 浅底深字：#D9C8AC 上全部用深褐文字，保证对比度；
       浅底一律正常叠加，不用加色合成（会把浅底刷白）。
   ========================================================================== */

:root {
    --signin-base:     #D9C8AC;   /* 主体背景色：浅麻褐 */
    --signin-base-lt:  #E4D9C4;   /* 亮调：顶部受光区 */
    --signin-base-dk:  #CBB79B;   /* 暗调：四角 */
    --signin-gold:     #966C26;   /* 描金：网格主格线 / 提示 */
    --signin-gold-dp:  #6a5222;   /* 深描金：卡片内小字提示 */
    --signin-gold-lt:  #CEA85E;   /* 亮描金：粒子金系气晕 */
    --signin-teal:     #0C6878;   /* 青碧：粒子青系 */
    --signin-teal-lt:  #2EBED0;   /* 亮青碧 */
    --signin-red:      #9B1E31;   /* 中医红 */
    --signin-red-dp:   #7d1a2c;
    --signin-text:     #2e2010;   /* 浅底正文色（深褐） */
    --signin-muted:    rgba(46, 30, 14, .92);
    --signin-line:     rgba(138, 106, 50, .30);
    --signin-card-w:   386px;
    --signin-grid-cell:   20px;                    /* 小网格格边长 */
    --signin-grid-line:   rgba(122, 94, 46, .115); /* 小网格细线 */
    --signin-grid-accent: rgba(122, 94, 46, .19);  /* 每 5 格一道主格线 */
}

html { height: 100%; }

body.signin {
    min-height: 100vh;
    margin: 0;
    color: var(--signin-text);
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
    background: var(--signin-base) url(../img/bg.jpg) no-repeat top center;
    webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover
}

/* ---------------------------------------------------------------- 背景层 */
.signin-bg {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* 四周向主体色渐隐：网格与粒子飘到边缘时自然溶进底色，避免硬边 */
.signin-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(126% 98% at 50% 50%,
        rgba(217, 200, 172, 0) 48%,
        rgba(217, 200, 172, .14) 76%,
        rgba(217, 200, 172, .38) 100%);
}

/* ------------------------------------------------------- 居中骨架 / 卡片 */
.signin-main {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    padding: 64px 18px;
    flex-direction: column;
}

.signin-c{
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: auto;
}

/* ------------------------------------------------------------ 卡片头（品牌） */
.card-brand {
    position: relative;
    text-align: center;
    padding-bottom: 70px;
}

/* margin:auto 在 flex 容器里做双向居中，且内容超高时不会把顶部裁掉 */
.signin-card {
    position: relative;
    width: 100%;
    max-width: var(--signin-card-w);
    margin: auto;
    padding: 34px 30px 22px;
    box-sizing: border-box;
    border: 1px solid rgba(138, 106, 50, .30);
    border-radius: 16px;
    /* 浅麻褐底上的白纸：近实白玻璃，网格与粒子只在卡片外圈可见，不干扰读字 */
    background: linear-gradient(162deg, rgba(255, 255, 255, .97) 0%, rgba(251, 246, 237, .95) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
    backdrop-filter: blur(16px) saturate(1.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .88) inset,
        0 26px 60px rgba(88, 62, 28, .20);
    animation: cardRise .7s cubic-bezier(.2, .7, .3, 1) both;
}

/* 顶部一道中医红细描边，替代原来繁杂的装饰 */
.signin-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 34px;
    right: 34px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(155, 30, 49, .68), transparent);
}

@keyframes cardRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------- 表单标题 */
.panel-head { margin-bottom: 20px; }

.panel-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--signin-red-dp);
}

.panel-sub {
    margin: 7px 0 0;
    font-size: 12.5px;
    color: rgba(58, 38, 14, .92);
}

/* ---------------------------------------------------------------- 输入框 */
.panel-fields { display: grid; gap: 14px; }

.field { position: relative; }

.field-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: rgba(138, 106, 50, .82);
    pointer-events: none;
    transition: color .25s ease;
}

#signupForm .field .form-control {
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 44px 0 42px;
    font-size: 14px;
    color: #3f2d1a;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(138, 106, 50, .30);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

#signupForm .field .form-control::-webkit-input-placeholder { color: rgba(96, 72, 42, .52); }
#signupForm .field .form-control::placeholder { color: rgba(96, 72, 42, .52); }

#signupForm .field .form-control:focus {
    /* style.min.css 里 .form-control:focus{border-color:#3c8dbc!important} 是全局强制，必须同样用 !important 压回 */
    border-color: rgba(138, 106, 50, .95) !important;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(200, 169, 106, .30), 0 6px 16px rgba(122, 92, 50, .12) !important;
    outline: none;
}

#signupForm .field:focus-within .field-icon { color: var(--signin-red); }

#signupForm .field .form-control:-webkit-autofill {
    -webkit-text-fill-color: #3f2d1a;
    -webkit-box-shadow: 0 0 0 60px #ffffff inset;
    caret-color: #3f2d1a;
}

.field-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(96, 72, 42, .62);
    font-size: 13px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.field-eye:hover { color: var(--signin-red); background: rgba(155, 30, 49, .08); }
.field-eye.is-on    { color: var(--signin-red); }

/* -------------------------------------------------------- 记住我 / 提示 */
.panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0 20px;
    min-height: 22px;
}

.panel-hint {
    margin-left: auto;
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--signin-gold-dp);
}

.panel-hint .fa { margin-right: 4px; color: rgba(155, 30, 49, .82); }

/* -------------------------------------------------------------- 登录按钮 */
#signupForm .btn-login {
    position: relative;
    height: 46px;
    padding: 0;
    font-size: 15px;
    letter-spacing: .34em;
    text-indent: .34em;
    color: #FDF7EA;
    border: 1px solid rgba(200, 169, 106, .70);
    border-radius: 8px;
    background: linear-gradient(120deg, #9B1E31 0%, #B32941 52%, #8C1A2B 100%);
    box-shadow: 0 12px 26px rgba(155, 30, 49, .30), 0 0 0 1px rgba(0, 0, 0, .10) inset;
    transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
    overflow: hidden;
}

#signupForm .btn-login .fa { margin-right: 8px; text-indent: 0; }

#signupForm .btn-login:hover,
#signupForm .btn-login:focus {
    color: #FFFDF7;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(155, 30, 49, .38), 0 0 20px rgba(155, 30, 49, .16);
}

#signupForm .btn-login:active { transform: translateY(0); filter: brightness(.97); }

/* 按钮上的流光 */
#signupForm .btn-login::after {
    content: "";
    position: absolute;
    top: 0;
    left: -45%;
    width: 38%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .30), transparent);
    animation: btnSheen 4.6s ease-in-out infinite;
}

@keyframes btnSheen {
    0%, 62%  { left: -45%; }
    88%, 100%{ left: 118%; }
}

/* ------------------------------------------------------------ 卡片页脚 */
.card-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.card-foot .foot-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(138, 106, 50, .44), transparent);
}

.card-foot .foot-text {
    font-size: 10.5px;
    letter-spacing: .22em;
    color: rgba(108, 76, 26, .95);
    white-space: nowrap;
}

/* -------------------------------------------------------------- 页面页脚 */
/* 浅麻褐底上仍用深字；本版无底部状态条，页脚回到最下方 */
.signin-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 3;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(46, 30, 14, .90);
    pointer-events: none;
}

.signin-foot a {
    color: #6a4608;
    text-decoration: none;
    pointer-events: auto;
    transition: color .2s ease;
}

.signin-foot a:hover { color: var(--signin-red); }

.signin-foot .foot-sep {margin: 0 10px; color: rgba(120, 88, 36, .62); }

/* ------------------------------------------------------------- 复选框 */
.checkbox-custom {
    position: relative;
    padding: 0 15px 0 25px;
    margin-bottom: 0;
    display: inline-block;
}

.checkbox-custom input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
    z-index: 2;
    margin: -6px 0 0 0;
    top: 50%;
    left: 3px;
}

.checkbox-custom label {
    cursor: pointer;
    line-height: 1.2;
    font-weight: normal;
    margin-bottom: 0;
    text-align: left;
    font-size: 13px;
    color: rgba(40, 26, 10, .96);
}

.checkbox-custom label:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -9px;
    width: 18px;
    height: 17px;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid rgba(138, 106, 50, .52);
    background: rgba(255, 255, 255, .78);
    transition: background .2s ease, border-color .2s ease;
}

.checkbox-custom input[type="checkbox"]:checked + label:before {
    background: linear-gradient(140deg, #9B1E31, #B32941);
    border-color: rgba(200, 169, 106, .70);
}

.checkbox-custom input[type="checkbox"]:checked + label:after {
    position: absolute;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    content: "\e013";
    top: 42%;
    left: 3px;
    margin-top: -5px;
    font-size: 11px;
    line-height: 1;
    width: 16px;
    height: 16px;
    color: #FBF6EC;
}

.checkbox-custom input[type="checkbox"]:focus-visible + label:before {
    box-shadow: 0 0 0 3px rgba(155, 30, 49, .18);
}

/* --------------------------------------------------------- 基础控件收敛 */
.form-control,
.form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus,
.has-warning .form-control:focus,
.navbar-collapse, .navbar-form, .navbar-form-custom .form-control:focus,
.navbar-form-custom .form-control:hover, .open .btn.dropdown-toggle,
.panel, .popover, .progress, .progress-bar {
    box-shadow: none;
}

/* --------------------------------------------------------------- 响应式 */
@media screen and (max-width: 767px) {
    .signin-main { padding: 40px 16px; }
    .signin-card { max-width: 100%; padding: 28px 22px 18px; }
    .brand-name { font-size: 18px; }
    :root { --signin-grid-cell: 16px; }
    #acupointCanvas { opacity: .86; }
    .signin-foot { font-size: 11px; bottom: 12px; }
}

@media screen and (max-width: 420px) {
    .signin-main { padding: 30px 14px; }
    .signin-card { padding: 24px 18px 16px; }
    .brand-mark { width: 46px; height: 46px; font-size: 19px; }
    .brand-name { font-size: 17px; }
    .brand-en { letter-spacing: .10em; }
}

/* 矮屏：收紧纵向节奏（上下留白保持对称，保证卡片垂直居中） */
@media screen and (max-height: 700px) {
    .signin-main { padding: 22px 16px; }
    .signin-card { padding: 22px 20px 14px; }
    .card-brand { padding-bottom: 14px; margin-bottom: 16px; }
    .brand-mark { width: 42px; height: 42px; font-size: 18px; border-radius: 12px; }
    .brand-name { margin-top: 10px; font-size: 17px; }
    .brand-en { display: none; }
    .panel-head { margin-bottom: 14px; }
    .panel-row { margin: 12px 0 16px; }
    .card-foot { margin-top: 16px; }
    .signin-foot { font-size: 11px; }
}

/* 大字号 / 无障碍 */
@media (prefers-reduced-motion: reduce) {
    .signin-card,
    #signupForm .btn-login::after {
        animation: none;
    }
}