/* =========================================================
   小涵互联 · 全站统一登录弹窗（modal.css）
   依赖 theme.css 的 --xh-* token，与 nav.css 配套使用
   ========================================================= */

.xhm {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.xhm[hidden] { display: none !important; }

.xhm-mask {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 16, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: xhmFade .22s ease both;
}

.xhm-card {
    position: relative;
    width: min(880px, 100%);
    display: grid;
    grid-template-columns: .86fr 1fr;
    background: var(--xh-panel, #0d1526);
    border: 1px solid var(--xh-line, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .1));
    border-radius: calc(var(--xh-radius, 18px) + 4px);
    box-shadow: 0 32px 80px rgba(2, 6, 16, .62), 0 0 0 1px rgba(var(--xh-w), var(--xh-w), var(--xh-w), .03) inset;
    overflow: hidden;
    animation: xhmPop .26s cubic-bezier(.22, 1, .36, 1) both;
}

/* 左侧品牌区 */
.xhm-aside {
    position: relative;
    padding: 30px 26px;
    color: #eaf1ff;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(var(--xh-primary-rgb), .34), transparent 62%),
        radial-gradient(120% 120% at 100% 100%, rgba(var(--xh-primary-2-rgb), .32), transparent 60%),
        linear-gradient(160deg, #101c33, #0a1424);
    background-color: #0b1424;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.xhm-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--xh-w), var(--xh-w), var(--xh-w), .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .03) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(#000, transparent 85%);
    -webkit-mask-image: linear-gradient(#000, transparent 85%);
}

.xhm-brand { position: relative; display: flex; align-items: center; gap: 10px; }
.xhm-brand img {
    width: 40px; height: 40px; border-radius: 12px;
    object-fit: cover; background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .08);
}
.xhm-brand b { display: block; font-size: 14.5px; letter-spacing: .2px; }
.xhm-brand span { font-size: 11px; color: rgba(213, 228, 255, .68); letter-spacing: 2px; }

.xhm-aside h3 {
    position: relative;
    margin: 6px 0 0;
    font-size: 24px;
    line-height: 1.42;
    font-weight: 700;
    letter-spacing: .3px;
}
.xhm-aside ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 11px;
}
.xhm-aside li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: rgba(224, 234, 255, .8);
}
.xhm-aside li i {
    width: 16px; height: 16px; flex: none;
    border-radius: 50%;
    background: rgba(var(--xh-primary-rgb), .18);
    border: 1px solid rgba(122, 168, 255, .48);
    position: relative;
}
.xhm-aside li i::after {
    content: "";
    position: absolute; inset: 0;
    margin: auto;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #77aaff;
    box-shadow: 0 0 8px rgba(119, 170, 255, .8);
}
.xhm-tip {
    position: relative;
    margin: auto 0 0;
    padding: 10px 12px;
    font-size: 11.5px;
    line-height: 1.7;
    color: rgba(214, 228, 255, .72);
    border-radius: 10px;
    border: 1px solid rgba(var(--xh-w), var(--xh-w), var(--xh-w), .08);
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .04);
}

/* 右侧表单区 */
.xhm-body { padding: 30px 32px 26px; background: var(--xh-panel, #0d1526); }
.xhm-head h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: .3px; }
.xhm-head p { margin: 0; font-size: 12.5px; color: var(--xh-muted, #8ea3c4); }

.xhm-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 1px solid var(--xh-line, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .1));
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .04);
    border-radius: 9px;
    color: var(--xh-muted, #93a6c6);
    cursor: pointer;
    transition: .18s;
    z-index: 3;
}
.xhm-close svg { width: 13px; height: 13px; fill: currentColor; }
.xhm-close:hover { color: #fff; border-color: rgba(255, 120, 120, .5); background: rgba(255, 90, 90, .14); }

/* 选项卡 */
.xhm-tabs {
    position: relative;
    display: flex;
    gap: 4px;
    margin: 20px 0 16px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(var(--xh-w), var(--xh-w), var(--xh-w), .04);
    border: 1px solid var(--xh-line, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .08));
}
.xhm-tab {
    position: relative;
    z-index: 2;
    flex: 1;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--xh-muted, #90a4c5);
    font-size: 13px;
    font-family: inherit;
    border-radius: 9px;
    cursor: pointer;
    transition: color .18s;
}
.xhm-tab.on { color: #fff; font-weight: 600; }
.xhm-tab:disabled { opacity: .45; cursor: not-allowed; }
/* 指示块：位置与宽度由 JS 按真实选中的 tab 计算（2/3 个 tab 都贴齐，切换时平滑滑动） */
.xhm-tab-ink {
    position: absolute;
    top: 4px;
    left: 0;
    height: 34px;
    width: var(--xhm-ink-w, calc(50% - 8px));
    transform: translate3d(var(--xhm-ink-x, 4px), 0, 0);
    border-radius: 9px;
    background: linear-gradient(135deg, var(--xh-primary, #4f8cff), var(--xh-primary-2, #7a5cff));
    box-shadow: 0 6px 18px rgba(var(--xh-primary-rgb), .32);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), width .28s cubic-bezier(.22, 1, .36, 1);
    will-change: transform, width;
    pointer-events: none;
}

/* 面板切换：同步淡入，避免文字瞬间闪现与滑块脱节 */
.xhm-pane, .xhm-form { animation: xhmPaneIn .24s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes xhmPaneIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .xhm-tab-ink { transition: none; }
    .xhm-pane, .xhm-form { animation: none; }
}

/* 提示条 */
.xhm-msg {
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.6;
    border-radius: 10px;
    border: 1px solid rgba(255, 107, 107, .38);
    background: rgba(255, 83, 83, .12);
    color: #ffb4b4;
}
.xhm-msg.ok { border-color: rgba(72, 199, 142, .38); background: rgba(72, 199, 142, .12); color: #9ff0c8; }

/* 表单 */
.xhm-form { display: grid; gap: 14px; }
.xhm-form[hidden] { display: none; }
.xhm-field { display: grid; gap: 7px; }
.xhm-field > span { font-size: 12px; color: var(--xh-muted, #93a6c6); letter-spacing: .3px; }

.xhm-box {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 12px;
    border-radius: 11px;
    background: rgba(8, 14, 26, .86);
    border: 1px solid var(--xh-line, rgba(var(--xh-w), var(--xh-w), var(--xh-w), .1));
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.xhm-box:focus-within {
    border-color: rgba(var(--xh-primary-rgb), .62);
    box-shadow: 0 0 0 4px rgba(var(--xh-primary-rgb), .12);
    background: rgba(8, 14, 26, 1);
}
.xhm-box.bad { border-color: rgba(255, 90, 90, .6); }
.xhm-ico { width: 16px; height: 16px; flex: none; fill: #6c81a4; }
.xhm-box input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--xh-text, #eaf1ff);
    font-size: 13.5px;
    font-family: inherit;
}
.xhm-box input::placeholder { color: #5d6f8f; }

.xhm-eye, .xhm-code {
    flex: none;
    border: 0;
    background: transparent;
    color: var(--xh-muted, #93a6c6);
    cursor: pointer;
}
.xhm-eye { display: grid; place-items: center; padding: 2px; }
.xhm-eye svg { width: 16px; height: 16px; fill: currentColor; }
.xhm-eye.on { color: var(--xh-primary, #6aa0ff); }

.xhm-code {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid rgba(var(--xh-primary-rgb), .42);
    background: rgba(var(--xh-primary-rgb), .1);
    color: #9dc2ff;
    white-space: nowrap;
    transition: .18s;
}
.xhm-code:hover:not(:disabled) { background: rgba(var(--xh-primary-rgb), .2); color: #fff; }
.xhm-code:disabled { opacity: .55; cursor: not-allowed; }

.xhm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: -2px;
}
.xhm-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--xh-muted, #93a6c6); cursor: pointer; }
.xhm-check input { width: 14px; height: 14px; accent-color: var(--xh-primary, #4f8cff); }
.xhm-link { font-size: 12px; color: #8fb8ff; text-decoration: none; }
.xhm-link:hover { text-decoration: underline; }

.xhm-submit {
    height: 44px;
    margin-top: 4px;
    border: 0;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 1px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--xh-primary, #4f8cff), var(--xh-primary-2, #7a5cff));
    box-shadow: 0 12px 26px rgba(var(--xh-primary-rgb), .28);
    transition: transform .16s, box-shadow .16s, opacity .16s;
}
.xhm-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(var(--xh-primary-rgb), .36); }
.xhm-submit:disabled { opacity: .62; cursor: not-allowed; transform: none; }

.xhm-foot {
    margin: 16px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--xh-muted, #93a6c6);
}
.xhm-foot a { color: #8fb8ff; text-decoration: none; margin-left: 4px; }
.xhm-foot a:hover { text-decoration: underline; }
.xhm-foot em { font-style: normal; margin-left: 4px; opacity: .7; }

@keyframes xhmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xhmPop {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
    .xhm { padding: 14px; align-items: flex-start; overflow-y: auto; }
    .xhm-card { grid-template-columns: 1fr; margin: auto 0; }
    .xhm-aside { display: none; }
    .xhm-body { padding: 26px 20px 22px; }
}

/* ============ 扫码登录 v4 ============ */
.xhm-pane[hidden]{display:none}
.xhm-qr{display:flex;gap:22px;align-items:flex-start;padding:6px 0 2px}
.xhm-qr-frame{position:relative;width:212px;height:212px;flex:0 0 auto;border-radius:16px;background:#fff;padding:8px;box-shadow:0 12px 30px rgba(15,23,41,.16),inset 0 0 0 1px rgba(15,23,41,.06)}
.xhm-qr-canvas{width:196px;height:196px;display:flex;align-items:center;justify-content:center}
.xhm-qr-canvas img,.xhm-qr-canvas canvas{width:196px!important;height:196px!important;display:block;border-radius:8px}
.xhm-qr-mask{position:absolute;inset:8px;border-radius:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:10px}
.xhm-qr-mask[hidden]{display:none}
.xhm-qr-icon{width:38px;height:38px;border-radius:50%;background:rgba(79,140,255,.14);color:#4f8cff;display:flex;align-items:center;justify-content:center}
.xhm-qr-icon svg{width:22px;height:22px;fill:currentColor}
.xhm-qr-mask p{margin:0;font-size:13px;color:#5a6478;line-height:1.5}
.xhm-qr-refresh{border:0;cursor:pointer;padding:7px 14px;border-radius:999px;background:linear-gradient(135deg,#4f8cff,#7a5cff);color:#fff;font-size:13px;font-weight:600}
.xhm-qr-side{flex:1 1 auto;min-width:150px}
.xhm-qr-side h4{margin:2px 0 10px;font-size:15px;color:var(--xh-text,#1a2233)}
.xhm-qr-side ol{margin:0 0 14px;padding-left:18px;color:var(--xh-text-2,#5a6478);font-size:13px;line-height:1.9}
.xhm-qr-status{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--xh-text-2,#5a6478)}
.xhm-qr-status em{font-style:normal}
.xhm-dot{width:8px;height:8px;border-radius:50%;background:#9aa4b8;flex:0 0 auto;box-shadow:0 0 0 3px rgba(154,164,184,.16)}
.xhm-dot.is-live{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16);animation:xhmPulse 1.6s infinite}
.xhm-dot.is-scan{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.xhm-dot.is-ok{background:#22c55e}
.xhm-dot.is-dead{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.16)}
@keyframes xhmPulse{0%,100%{opacity:1}50%{opacity:.35}}
.xhm-qr-link{display:inline-block;margin-top:12px;font-size:12.5px;color:#4f8cff;text-decoration:none;border-bottom:1px dashed rgba(79,140,255,.5)}
.xhm-qr-link:hover{color:#7a5cff}
.xhm-tab svg{width:15px;height:15px;fill:currentColor;margin-right:5px;vertical-align:-2px}
html.dark .xhm-qr-frame,html[data-theme="dark"] .xhm-qr-frame{background:#fff}
@media(max-width:640px){
  .xhm-qr{flex-direction:column;align-items:center;gap:14px}
  .xhm-qr-side{text-align:center;min-width:0}
  .xhm-qr-side ol{text-align:left;display:inline-block}
  .xhm-qr-status{justify-content:center}
}

/* ============ 移动端扫一扫登录电脑入口 v11 ============ */
.xhm-scan-entry{display:flex;align-items:center;gap:12px;margin:14px 0 2px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(135deg,rgba(79,140,255,.10),rgba(122,92,255,.10));
  border:1px solid rgba(79,140,255,.22);text-decoration:none;transition:.18s}
.xhm-scan-entry:hover{border-color:rgba(79,140,255,.4);transform:translateY(-1px)}
.xhm-scan-ico{width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4f8cff,#7a5cff);color:#fff}
.xhm-scan-ico svg{width:19px;height:19px;fill:currentColor}
.xhm-scan-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.xhm-scan-txt strong{font-size:13.5px;color:var(--xh-text,#1a2233);font-weight:600}
.xhm-scan-txt em{font-style:normal;font-size:11.5px;color:var(--xh-text-2,#5a6478);line-height:1.45}
.xhm-scan-arrow{flex:0 0 auto;color:#8fa2c2;display:flex}
.xhm-scan-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.dark .xhm-scan-txt strong,html[data-theme="dark"] .xhm-scan-txt strong{color:#e8eefc}
@media(min-width:641px){.xhm-scan-entry{display:none}}