/* 登录页与态势总览一体化：单屏、轻量、浅色 */
html, body { height: 100%; overflow: hidden; }
body {
margin: 0; color: #263f52; background:
radial-gradient(1200px 520px at 15% -10%, rgba(34,170,196,.12), transparent 60%),
radial-gradient(900px 460px at 90% 0%, rgba(49,118,164,.10), transparent 60%),
#f3f8fb;
font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
font-size: 12px;
}
* { box-sizing: border-box; }
.screen { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
/* header */
.lp-header {
flex: 0 0 58px; height: 58px; padding: 0 20px; display: flex; align-items: center; gap: 20px;
background: rgba(255,255,255,.9); border-bottom: 1px solid #dbe8ef; backdrop-filter: blur(14px); z-index: 20;
}
.lp-brand { display: flex; align-items: center; gap: 10px; min-width: 300px; color: #0b2233; }
.lp-mark { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #bff6ff; background: linear-gradient(145deg,#0f7892,#0b2c44); box-shadow: 0 6px 15px rgba(15,120,146,.2); flex: 0 0 auto; }
.lp-title { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: .1px; }
.lp-sub { display: block; font-size: 9px; color: #6c8293; margin-top: 2px; letter-spacing: .2px; }
.lp-nav { display: flex; gap: 15px; margin-left: auto; }
.lp-nav a { font-size: 11px; color: #496478; padding: 5px 2px; }
.lp-nav a:hover { color: #0f9fb5; }
.lp-snapshot { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: #287567; background: #e9f8f2; border: 1px solid #c7ebdd; border-radius: 999px; padding: 4px 8px; }
.lp-snapshot i { width: 5px; height: 5px; border-radius: 50%; background: #2fae83; box-shadow: 0 0 0 3px rgba(47,174,131,.12); }
.lp-login-btn { border: 1px solid #bcdbe6; background: linear-gradient(180deg,#fff,#f2fafc); color: #125c78; border-radius: 9px; padding: 8px 13px; font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.lp-login-btn:hover { border-color: #0f9fb5; color: #0b2233; transform: translateY(-1px); }
/* stats */
.lp-stats { flex: 0 0 76px; height: 76px; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 10px 20px 4px; }
.lp-stat { position: relative; overflow: hidden; border: 1px solid #dbe8ef; background: rgba(255,255,255,.82); border-radius: 11px; padding: 8px 13px; box-shadow: 0 5px 16px rgba(18,57,79,.04); }
.lp-stat:after { content: ""; position: absolute; right: -25px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle,rgba(31,172,193,.12),transparent 68%); }
.lp-stat-label { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #6c8293; white-space: nowrap; }
.lp-stat-label i { width: 5px; height: 5px; border-radius: 50%; background: #27aebe; }
.lp-stat-val { color: #0d3449; font-size: 25px; line-height: 1.05; font-weight: 800; letter-spacing: -.4px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.lp-stat-val small { font-size: 9px; font-weight: 500; color: #728999; margin-left: 3px; letter-spacing: 0; }
.lp-stat-foot { font-size: 8px; color: #8a9eac; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-stat.risk .lp-stat-val { color: #bc4b4b; } .lp-stat.risk .lp-stat-label i { background: #d65c5c; }
.lp-stat.gold .lp-stat-val { color: #ad751d; } .lp-stat.gold .lp-stat-label i { background: #dba13e; }
/* main */
.lp-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 186px minmax(0,1fr) 350px; gap: 11px; padding: 0 20px 8px; }
.lp-rail { min-height: 0; overflow: auto; border: 1px solid #dbe8ef; background: rgba(255,255,255,.78); border-radius: 13px; padding: 8px; box-shadow: 0 9px 25px rgba(18,57,79,.05); }
.lp-rail-hd { font-size: 8.5px; color: #8198a7; letter-spacing: 1px; padding: 4px 7px 7px; border-bottom: 1px solid #e5eff4; margin-bottom: 4px; }
.lp-rail a { display: flex; align-items: center; gap: 8px; padding: 7px 7px; border-radius: 8px; color: #456277; font-size: 10.5px; }
.lp-rail a:hover { background: #edf8fb; color: #0d637b; }
.lp-rail .ri { width: 22px; height: 22px; border-radius: 6px; background: #eef7fa; color: #25778f; display: flex; align-items: center; justify-content: center; font-size: 11px; flex: 0 0 auto; }
.lp-rail .lk { margin-left: auto; font-size: 7px; color: #8da2b0; background: #f4f8fa; border: 1px solid #e4edf2; border-radius: 999px; padding: 1px 4px; }
.lp-rail .premium { color: #94661b; } .lp-rail .premium .ri { color: #a4701d; background: #fff7e8; } .lp-rail .premium .lk { color: #b0791e; border-color: #f0dfbb; background: #fff9ec; }
.lp-rail-note { margin: 7px 5px 2px; padding-top: 7px; border-top: 1px dashed #e0ebf0; color: #8da1ae; font-size: 8px; line-height: 1.6; }
/* map */
.lp-map-card { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid #d5e5ec; background: #fff; border-radius: 13px; overflow: hidden; box-shadow: 0 9px 25px rgba(18,57,79,.07); }
.lp-map-hd { flex: 0 0 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid #e4eef3; background: linear-gradient(180deg,#fff,#f7fbfd); }
.lp-map-hd b { font-size: 11.5px; color: #123c55; }
.lp-map-hd span { font-size: 8.5px; color: #8198a8; margin-left: 7px; }
.lp-map-hd em { font-style: normal; font-size: 8px; color: #3e7c6d; background: #edf9f4; border: 1px solid #cdece0; border-radius: 999px; padding: 3px 7px; }
.lp-map-frame { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #dceaf2; }
.lp-map-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.02); }
.lp-map-frame:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%,transparent 72%,rgba(13,42,60,.10)); }
.lp-map-overlay { position: absolute; left: 11px; top: 11px; z-index: 4; background: rgba(255,255,255,.85); border: 1px solid rgba(181,214,226,.9); border-radius: 8px; padding: 6px 9px; backdrop-filter: blur(6px); }
.lp-map-overlay b { display: block; font-size: 8px; color: #345c72; } .lp-map-overlay span { display: block; font-size: 7px; color: #8096a4; margin-top: 1px; }
.lp-map-legend { position: absolute; right: 11px; bottom: 9px; z-index: 4; display: flex; gap: 8px; background: rgba(255,255,255,.84); border: 1px solid rgba(181,214,226,.9); border-radius: 7px; padding: 5px 8px; font-size: 7.5px; color: #587487; backdrop-filter: blur(6px); }
.lp-map-legend i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin-right: 3px; vertical-align: 0; }
.lp-map-foot { flex: 0 0 25px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 1px solid #e4eef3; color: #879cab; font-size: 8px; background: #fbfdfe; }
.lp-marker { position: absolute; transform: translate(-50%,-50%); width: 10px; height: 10px; border-radius: 50%; z-index: 3; border: 2px solid #fff; box-shadow: 0 2px 7px rgba(20,50,70,.28); }
.lp-marker.a { background: #cf4d4d; } .lp-marker.b { background: #d0912f; } .lp-marker.c { background: #6c8797; }
.lp-marker:before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%); border: 1px solid currentColor; opacity: .45; animation: lp-pulse 2.5s ease-out infinite; }
.lp-marker.a:before { color: #cf4d4d; } .lp-marker.b:before { color: #d0912f; } .lp-marker.c:before { color: #6c8797; }
@keyframes lp-pulse { 0% { transform: translate(-50%,-50%) scale(1); opacity: .5; } 80%,100% { transform: translate(-50%,-50%) scale(3.2); opacity: 0; } }
/* right column */
.lp-right { min-height: 0; display: flex; flex-direction: column; gap: 9px; }
.lp-login-card { flex: 0 1 auto; max-height: 66%; overflow: auto; border: 1px solid #d2e5ee; border-radius: 13px; background: rgba(255,255,255,.93); box-shadow: 0 10px 28px rgba(18,57,79,.09); padding: 11px 15px 9px; scrollbar-width: thin; }
.lp-login-card.flash { animation: lp-flash 1.1s ease; }
@keyframes lp-flash { 0% { box-shadow: 0 0 0 0 rgba(15,159,181,.55), 0 10px 28px rgba(18,57,79,.09); } 60% { box-shadow: 0 0 0 5px rgba(15,159,181,.18), 0 10px 28px rgba(18,57,79,.09); } 100% { box-shadow: 0 0 0 0 rgba(15,159,181,0), 0 10px 28px rgba(18,57,79,.09); } }
.lp-login-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 4px; }
.lp-login-hd h2 { margin: 0; font-size: 16px; color: #0d3449; letter-spacing: .2px; }
.lp-login-hd p { margin: 2px 0 0; font-size: 8.5px; color: #7d93a2; }
.lp-field { margin-top: 7px !important; }
.lp-field > span:first-child { font-size: 9.5px !important; margin-bottom: 3px !important; }
.lp-field input { height: 32px !important; font-size: 11.5px !important; border-radius: 5px !important; }
.lp-login-card .login-row { margin-top: 7px; }
.lp-login-card .remember { font-size: 9.5px; }
.lp-login-card .link-btn { font-size: 9.5px; }
.lp-login-card .login-env-line { margin-top: 3px; }
.lp-login-card .login-env { font-size: 8.5px; }
.lp-login-card .login-error { min-height: 14px; margin-top: 5px; font-size: 10px; }
.lp-submit { height: 34px !important; margin-top: 4px !important; border-radius: 5px !important; font-size: 12px !important; letter-spacing: 1.5px !important; }
.lp-login-foot { display: flex; justify-content: space-between; gap: 8px; border-top: 1px dashed #e2edf2; margin-top: 7px; padding-top: 5px; color: #92a5b2; font-size: 7.5px; }
.lp-login-card .captcha-puzzle { width: 100%; max-width: 320px; }
.lp-login-card .captcha-puzzle img#captchaBg { width: 100%; height: auto; }
.lp-login-card .login-captcha-question { font-size: 12px; padding: 6px; margin: 6px 0; }
.lp-mini-alerts { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid #dbe8ef; border-radius: 13px; background: rgba(255,255,255,.84); box-shadow: 0 9px 25px rgba(18,57,79,.05); overflow: hidden; }
.lp-mini-hd { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 9px 11px 7px; border-bottom: 1px solid #e4eef3; }
.lp-mini-hd b { font-size: 11px; color: #143f57; display: flex; align-items: center; gap: 6px; }
.lp-mini-hd b:before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: #d45d5d; }
.lp-mini-hd small { font-size: 7.5px; color: #8198a8; }
.lp-mini-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 2px 7px; scrollbar-width: thin; }
.lp-alert { display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-bottom: 1px solid #edf3f6; }
.lp-alert:hover { background: #f2fafc; }
.lp-alert-level { flex: 0 0 auto; font-size: 7.5px; font-weight: 800; border-radius: 4px; padding: 2px 4px; }
.lp-alert-level.a { background: #fdecec; color: #bd4141; border: 1px solid #f3caca; } .lp-alert-level.b { background: #fff7e7; color: #a7751e; border: 1px solid #f1dfb9; } .lp-alert-level.c { background: #eff4f7; color: #5d7788; border: 1px solid #dde9ef; }
.lp-alert-main { min-width: 0; flex: 1 1 auto; }
.lp-alert-main b { display: block; font-size: 9.5px; color: #1e4359; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-alert-main small { display: block; font-size: 7.5px; color: #8499a7; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-alert-time { flex: 0 0 auto; font-size: 7.5px; color: #9aafbc; }
.lp-empty { padding: 18px; text-align: center; color: #8aa1af; font-size: 9px; }
.lp-mini-more { flex: 0 0 27px; display: flex; align-items: center; justify-content: center; border-top: 1px solid #e4eef3; color: #147c93; font-size: 8.5px; font-weight: 600; background: #f8fcfd; }
.lp-mini-more:hover { background: #effafc; }
.lp-foot { flex: 0 0 23px; height: 23px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 20px; color: #879cab; font-size: 7.5px; border-top: 1px solid #e1edf2; background: rgba(255,255,255,.55); }
.lp-foot b { color: #4e7184; }
.lp-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%,10px); opacity: 0; pointer-events: none; background: #0d3349; color: #e7f8fd; border: 1px solid rgba(125,220,235,.28); border-radius: 8px; padding: 8px 12px; font-size: 10px; z-index: 80; transition: .2s; }
.lp-toast.in { opacity: 1; transform: translate(-50%,0); }
@media (max-width: 1180px) {
.lp-main { grid-template-columns: 166px minmax(0,1fr) 330px; }
.lp-title { font-size: 12.5px; } .lp-sub { font-size: 8px; }
.lp-nav { display: none; }
.lp-map-hd span { display: none; }
}
@media (max-width: 900px) {
.lp-main { grid-template-columns: minmax(0,1fr) 320px; }
.lp-rail { display: none; }
.lp-stats { padding-left: 14px; padding-right: 14px; gap: 7px; }
.lp-stat { padding: 7px 9px; } .lp-stat-val { font-size: 21px; } .lp-stat-foot { display: none; }
}
@media (max-width: 680px) {
.lp-header { padding: 0 12px; gap: 8px; } .lp-brand { min-width: 0; } .lp-title { font-size: 11px; } .lp-sub { display: none; } .lp-snapshot { display: none; }
.lp-main { display: flex; flex-direction: column; padding: 0 10px 5px; overflow: auto; }
.lp-map-card { flex: 0 0 48%; } .lp-right { flex: 1 1 auto; }
.lp-login-card { max-height: 60%; }
.lp-foot { font-size: 6.5px; padding: 0 10px; }
}
/* ================= 视觉增强版 ================= */
body { font-size: 13px; background:
radial-gradient(1100px 520px at 12% -12%, rgba(24,174,193,.16), transparent 58%),
radial-gradient(900px 500px at 92% 0%, rgba(29,101,145,.12), transparent 62%),
#eef4f8; }
.lp-header {
flex: 0 0 68px; height: 68px; padding: 0 24px; gap: 24px;
background: linear-gradient(105deg, #071b2b 0%, #0b2d43 58%, #0d3b51 100%);
border-bottom: 1px solid rgba(102,196,218,.18);
box-shadow: 0 6px 24px rgba(4,25,40,.18);
}
.lp-brand { min-width: 335px; color: #e7f7ff; }
.lp-mark { width: 41px; height: 41px; border-radius: 12px; color: #c9fbff;
background: linear-gradient(145deg,#0f8ba4,#0b3654);
border: 1px solid rgba(126,230,246,.22); box-shadow: 0 0 24px rgba(31,174,200,.18); }
.lp-title { font-size: 18px; font-weight: 800; letter-spacing: .3px; color: #f1fbff; }
.lp-sub { font-size: 10px; color: #89b5c9; margin-top: 3px; letter-spacing: .4px; }
.lp-nav a { font-size: 12.5px; color: #b1d0df; }
.lp-nav a:hover { color: #7fe4f4; }
.lp-snapshot { font-size: 10px; color: #90e7d3; background: rgba(32,164,133,.14);
border-color: rgba(77,207,174,.28); padding: 5px 10px; }
.lp-login-btn { padding: 10px 17px; font-size: 12.5px; border: 1px solid rgba(117,225,244,.55);
color: #062335; background: linear-gradient(135deg,#7fe7f6,#31b4d1);
box-shadow: 0 7px 20px rgba(27,174,201,.22); }
.lp-login-btn:hover { border-color: #9df0ff; color: #041a29; background: linear-gradient(135deg,#9cedfa,#4cc8e1); }
.lp-stats { flex: 0 0 94px; height: 94px; gap: 13px; padding: 14px 24px 8px; }
.lp-stat { padding: 12px 17px; border-radius: 14px; border-color: #d6e5ed; background: rgba(255,255,255,.9);
box-shadow: 0 8px 24px rgba(17,55,77,.065); border-left: 3px solid #8cc6d8; }
.lp-stat.risk { border-left-color: #d45d5d; } .lp-stat.gold { border-left-color: #d5a03f; }
.lp-stat:nth-child(2) { border-left-color: #25a9bd; } .lp-stat:nth-child(4) { border-left-color: #2c83ad; }
.lp-stat-label { font-size: 11px; color: #587282; gap: 6px; }
.lp-stat-label i { width: 6px; height: 6px; }
.lp-stat-val { font-size: 34px; margin-top: 4px; letter-spacing: -.8px; }
.lp-stat-val small { font-size: 11px; margin-left: 4px; }
.lp-stat-foot { font-size: 9px; margin-top: 4px; color: #8096a5; }
.lp-main { grid-template-columns: 208px minmax(0,1fr) 380px; gap: 14px; padding: 0 24px 10px; }
.lp-rail { border-radius: 15px; padding: 10px; border-color: #d6e5ed; box-shadow: 0 10px 28px rgba(17,55,77,.07); }
.lp-rail-hd { font-size: 10px; letter-spacing: 1.4px; padding: 6px 8px 9px; }
.lp-rail a { font-size: 12px; padding: 9px 9px; gap: 9px; border-radius: 9px; }
.lp-rail .ri { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.lp-rail .lk { font-size: 8px; padding: 2px 5px; }
.lp-rail-note { font-size: 9px; line-height: 1.7; margin: 9px 5px 3px; padding-top: 9px; }
.lp-map-card { border-radius: 15px; border-color: #cddfe9; box-shadow: 0 12px 32px rgba(17,55,77,.09); }
.lp-map-hd { flex-basis: 44px; padding: 0 16px; background: linear-gradient(180deg,#ffffff,#f4fafc); }
.lp-map-hd b { font-size: 13.5px; letter-spacing: .2px; }
.lp-map-hd span { font-size: 10px; }
.lp-map-hd em { font-size: 9px; padding: 4px 8px; }
.lp-map-overlay { padding: 8px 11px; border-radius: 9px; }
.lp-map-overlay b { font-size: 9.5px; } .lp-map-overlay span { font-size: 8px; }
.lp-map-legend { font-size: 9px; padding: 6px 9px; border-radius: 8px; }
.lp-map-legend i { width: 6px; height: 6px; }
.lp-map-foot { flex-basis: 28px; font-size: 9px; padding: 0 15px; }
.lp-marker { width: 12px; height: 12px; border-width: 2px; }
.lp-radar { position: absolute; right: 9%; top: 14%; width: 185px; height: 185px; border-radius: 50%;
border: 1px solid rgba(31,148,168,.17); pointer-events: none; z-index: 2; }
.lp-radar:before, .lp-radar:after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(31,148,168,.12); }
.lp-radar:before { inset: 24px; } .lp-radar:after { inset: 56px; }
.lp-map-claim { position: absolute; left: 22px; bottom: 23px; z-index: 6; width: min(370px, 45%);
padding: 18px 20px 17px; border-radius: 14px; color: #e9f9ff;
background: linear-gradient(145deg, rgba(5,29,45,.88), rgba(8,53,72,.78));
border: 1px solid rgba(133,226,241,.27); box-shadow: 0 18px 45px rgba(4,32,49,.26); backdrop-filter: blur(10px); }
.lp-claim-kicker { display: block; font-size: 8px; letter-spacing: 2.1px; color: #7bd8e8; font-weight: 700; margin-bottom: 8px; }
.lp-map-claim h1 { margin: 0 0 7px; font-size: 27px; line-height: 1.22; letter-spacing: -.7px; font-weight: 800; color: #f2fcff; }
.lp-map-claim h1 em { font-style: normal; color: #66e1ef; }
.lp-map-claim p { margin: 0 0 13px; font-size: 10.5px; color: #a9c9d8; line-height: 1.7; }
.lp-claim-btn { border: 1px solid rgba(134,232,246,.55); background: linear-gradient(135deg,#77e4f2,#2baac8);
color: #062334; border-radius: 8px; padding: 9px 14px; font-size: 11px; font-weight: 800; cursor: pointer; display: inline-flex; gap: 7px; }
.lp-claim-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.lp-right { gap: 11px; }
.lp-login-card { flex: 0 1 auto; max-height: 72%; padding: 18px 20px 12px; border-radius: 15px;
color: #e7f6fc; background: linear-gradient(150deg, #0a263a 0%, #0b344b 55%, #0b3d53 100%);
border: 1px solid rgba(101,200,219,.24); box-shadow: 0 16px 42px rgba(6,37,56,.22); }
.lp-login-card.flash { animation: lp-flash-dark 1.1s ease; }
@keyframes lp-flash-dark { 0% { box-shadow: 0 0 0 0 rgba(82,222,242,.5), 0 16px 42px rgba(6,37,56,.22); } 60% { box-shadow: 0 0 0 6px rgba(82,222,242,.12), 0 16px 42px rgba(6,37,56,.22); } 100% { box-shadow: 0 0 0 0 rgba(82,222,242,0), 0 16px 42px rgba(6,37,56,.22); } }
.lp-login-kicker { display: block; font-size: 7.5px; letter-spacing: 2px; color: #6ee0ef; font-weight: 700; margin-bottom: 5px; }
.lp-login-hd h2 { font-size: 23px; color: #f2fbff; font-weight: 800; letter-spacing: .2px; }
.lp-login-hd p { font-size: 10px; color: #95b9ca; margin-top: 4px; }
.lp-login-card .lp-field { margin-top: 12px !important; }
.lp-login-card .lp-field > span:first-child { font-size: 10.5px !important; color: #a9cbdb !important; margin-bottom: 5px !important; }
.lp-login-card .lp-field input { height: 40px !important; font-size: 13px !important; color: #effbff !important;
background: rgba(233,250,255,.08) !important; border-color: rgba(154,216,231,.25) !important; border-radius: 7px !important; }
.lp-login-card .lp-field input:focus { border-color: #65d8e9 !important; box-shadow: 0 0 0 3px rgba(82,213,233,.12) !important; }
.lp-login-card .lp-field input::placeholder { color: #7697a8 !important; }
.lp-login-card .pw-toggle { color: #8fb5c7; top: 6px; height: 28px; }
.lp-login-card .pw-toggle:hover { color: #c9f8ff; }
.lp-login-card .login-row { margin-top: 11px; }
.lp-login-card .remember { color: #9ab9c8; font-size: 10.5px; }
.lp-login-card .remember input { accent-color: #43c6dd; }
.lp-login-card .link-btn { color: #7ddced; font-size: 10.5px; }
.lp-login-card .login-env-line { margin-top: 5px; }
.lp-login-card .login-env { color: #7e9fb1; font-size: 9.5px; white-space: normal; }
.lp-login-card .login-error { min-height: 16px; margin-top: 7px; color: #ffb7a8; font-size: 11px; }
.lp-submit { height: 43px !important; margin-top: 7px !important; border-radius: 7px !important; font-size: 14px !important;
letter-spacing: 2px !important; border: 1px solid rgba(137,236,248,.5) !important;
background: linear-gradient(135deg,#7ee5f2,#2cb2cf) !important; color: #052333 !important;
font-weight: 800 !important; box-shadow: 0 8px 22px rgba(30,176,200,.22); }
.lp-submit:hover { filter: brightness(1.07); background: linear-gradient(135deg,#95eef8,#45c3dd) !important; }
.lp-login-card .captcha-inline { border-color: rgba(147,214,229,.22); background: rgba(255,255,255,.035); }
.lp-login-card .captcha-inline-hd { color: #9fc4d3; }
.lp-login-card .login-captcha-question { background: rgba(255,255,255,.06); border-color: rgba(147,214,229,.2); color: #eaf9ff; }
.lp-login-card .captcha-slider-tip { color: #8eafc0; }
.lp-premium-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 11px; padding: 9px 10px;
border-radius: 8px; border: 1px solid rgba(222,181,91,.28); background: rgba(213,164,50,.09); }
.lp-premium-note > span { color: #f1c368; font-size: 13px; line-height: 1; margin-top: 1px; }
.lp-premium-note b { display: block; color: #f3d899; font-size: 10px; margin-bottom: 2px; }
.lp-premium-note small { display: block; color: #aeb7b3; font-size: 8.5px; line-height: 1.55; }
.lp-login-foot { margin-top: 9px; padding-top: 7px; border-top-color: rgba(156,211,225,.18); color: #7597a9; font-size: 8.5px; }
.lp-mini-alerts { border-radius: 15px; border-color: #d6e5ed; box-shadow: 0 10px 28px rgba(17,55,77,.07); }
.lp-mini-hd { padding: 12px 14px 9px; }
.lp-mini-hd b { font-size: 13px; } .lp-mini-hd b:before { height: 14px; width: 3px; }
.lp-mini-hd small { font-size: 9px; }
.lp-mini-list { padding: 3px 9px; }
.lp-alert { padding: 9px 6px; gap: 7px; }
.lp-alert-level { font-size: 9px; padding: 3px 6px; border-radius: 5px; }
.lp-alert-main b { font-size: 11px; } .lp-alert-main small { font-size: 9px; margin-top: 3px; }
.lp-alert-time { font-size: 8.5px; }
.lp-mini-more { flex-basis: 32px; font-size: 10px; }
.lp-foot { flex-basis: 26px; height: 26px; font-size: 8.5px; padding: 0 24px; }
.lp-toast { font-size: 12px; padding: 10px 15px; }
@media (max-width: 1366px) {
.lp-header { padding: 0 18px; gap: 14px; } .lp-brand { min-width: 280px; }
.lp-title { font-size: 16px; } .lp-sub { font-size: 9px; }
.lp-nav { gap: 10px; } .lp-nav a { font-size: 11px; }
.lp-stats { padding: 12px 18px 7px; flex-basis: 86px; height: 86px; gap: 10px; }
.lp-stat-val { font-size: 29px; } .lp-stat { padding: 10px 13px; }
.lp-main { grid-template-columns: 190px minmax(0,1fr) 350px; gap: 11px; padding: 0 18px 8px; }
.lp-map-claim { width: min(310px,46%); padding: 14px 15px; left: 16px; bottom: 16px; }
.lp-map-claim h1 { font-size: 23px; } .lp-map-claim p { font-size: 9.5px; }
.lp-login-card { padding: 15px 16px 10px; } .lp-login-hd h2 { font-size: 20px; }
.lp-login-card .lp-field input { height: 37px !important; font-size: 12px !important; }
.lp-login-card .lp-field { margin-top: 9px !important; }
.lp-submit { height: 39px !important; font-size: 13px !important; }
.lp-rail a { font-size: 11px; padding: 8px; }
.lp-mini-hd b { font-size: 12px; }
}
@media (max-width: 900px) {
.lp-main { grid-template-columns: minmax(0,1fr) 340px; }
.lp-map-claim { width: min(300px,55%); } .lp-map-claim h1 { font-size: 22px; }
}
@media (max-width: 680px) {
.lp-header { height: 60px; flex-basis: 60px; }
.lp-map-claim { width: calc(100% - 24px); left: 12px; bottom: 12px; }
.lp-map-claim h1 { font-size: 21px; }
}
/* 登录卡内容收口 */
.lp-login-card { max-height: 84%; padding: 15px 19px 8px; }
.lp-login-card .lp-field { margin-top: 9px !important; }
.lp-login-card .lp-field > span:first-child { font-size: 11px !important; }
.lp-login-card .lp-field input { height: 38px !important; }
.lp-login-card .login-row { margin-top: 8px; }
.lp-login-card .login-error { margin-top: 5px; min-height: 14px; }
.lp-submit { height: 41px !important; margin-top: 5px !important; }
.lp-premium-note { margin-top: 8px; padding: 8px 9px; }
.lp-login-foot { margin-top: 7px; padding-top: 5px; }
/* 可读性微调 */
.lp-stat-foot { font-size: 10px; }
.lp-rail-note { font-size: 9.5px; }
.lp-map-foot { font-size: 9.5px; }
.lp-map-hd span { font-size: 10.5px; }
.lp-mini-hd small { font-size: 10px; }
.lp-alert-main b { font-size: 12px; }
.lp-alert-main small { font-size: 10px; }
.lp-alert-time { font-size: 9.5px; }
.lp-alert-level { font-size: 9.5px; }
.lp-premium-note b { font-size: 11px; }
.lp-premium-note small { font-size: 9.5px; }
.lp-login-foot { font-size: 9px; }
.lp-foot { font-size: 9px; }
.lp-claim-kicker { font-size: 8.5px; }
.lp-login-card { max-height: calc(100% - 112px); }
.lp-login-card { padding: 13px 19px 5px; }
.lp-premium-note { margin-top: 6px; padding: 7px 9px; }
.lp-login-foot { margin-top: 5px; padding-top: 4px; }
.lp-login-card { padding-bottom: 3px; }
.lp-login-foot { margin-top: 4px; padding-top: 3px; }
.lp-login-card { flex: 0 0 auto; max-height: calc(100% - 90px); }
/* ================= 浅色统一版 ================= */
a, a:hover, a:focus { text-decoration: none !important; }
body { background:
radial-gradient(1100px 520px at 10% -12%, rgba(29,174,196,.13), transparent 58%),
radial-gradient(900px 500px at 94% 0%, rgba(31,111,157,.10), transparent 60%),
#f2f7fa; }
.lp-header {
background: rgba(255,255,255,.94); border-bottom: 1px solid #d9e8ef;
box-shadow: 0 4px 20px rgba(14,53,75,.07);
}
.lp-brand { color: #0b2233; }
.lp-title { color: #0b2233; }
.lp-sub { color: #6d8495; }
.lp-nav a { color: #4b6576; }
.lp-nav a:hover { color: #0f8ba4; }
.lp-snapshot { color: #237b67; background: #eaf8f2; border-color: #c7eadc; }
.lp-login-btn {
color: #fff; border: 1px solid #0e7892;
background: linear-gradient(135deg,#0f8ba4,#0d5c7b);
box-shadow: 0 8px 20px rgba(15,120,146,.20);
}
.lp-login-btn:hover { color: #fff; border-color: #0b667f; background: linear-gradient(135deg,#18a1ba,#0d6b8b); }
.lp-map-claim {
color: #173e54; background: rgba(255,255,255,.94);
border: 1px solid #cfe4ed; box-shadow: 0 15px 38px rgba(14,53,75,.13);
}
.lp-claim-kicker { color: #0b8ba2; }
.lp-map-claim h1 { color: #0b2e43; }
.lp-map-claim h1 em { color: #0a91a9; }
.lp-map-claim p { color: #5d7889; }
.lp-claim-btn {
color: #fff; border-color: #0c7892;
background: linear-gradient(135deg,#0f8ba4,#0d5c7b);
box-shadow: 0 7px 18px rgba(15,120,146,.18);
}
.lp-claim-btn:hover { filter: brightness(1.06); }
.lp-login-card {
color: #1d445b; background: linear-gradient(160deg,#ffffff,#f5fbfd);
border: 1px solid #d3e5ee; box-shadow: 0 16px 40px rgba(14,53,75,.11);
}
.lp-login-card.flash { animation: lp-flash-light 1.1s ease; }
@keyframes lp-flash-light {
0% { box-shadow: 0 0 0 0 rgba(15,159,181,.4), 0 16px 40px rgba(14,53,75,.11); }
60% { box-shadow: 0 0 0 6px rgba(15,159,181,.10), 0 16px 40px rgba(14,53,75,.11); }
100% { box-shadow: 0 0 0 0 rgba(15,159,181,0), 0 16px 40px rgba(14,53,75,.11); }
}
.lp-login-kicker { color: #0d849b; }
.lp-login-hd h2 { color: #0b2e43; }
.lp-login-hd p { color: #7890a1; }
.lp-login-card .lp-field > span:first-child { color: #587183 !important; }
.lp-login-card .lp-field input {
color: #173b50 !important; background: #f7fbfd !important;
border-color: #d2e3eb !important;
}
.lp-login-card .lp-field input:focus { border-color: #22a9bf !important; box-shadow: 0 0 0 3px rgba(34,169,191,.12) !important; }
.lp-login-card .lp-field input::placeholder { color: #9aadb9 !important; }
.lp-login-card .pw-toggle { color: #6f8798; }
.lp-login-card .pw-toggle:hover { color: #0b8198; }
.lp-login-card .remember { color: #667f90; }
.lp-login-card .remember input { accent-color: #0f9fb5; }
.lp-login-card .link-btn { color: #0b8198; }
.lp-login-card .login-env { color: #8298a7; }
.lp-login-card .login-error { color: #b03a3a; }
.lp-submit {
color: #fff !important; border-color: #0c7892 !important;
background: linear-gradient(135deg,#0f8ba4,#0d5c7b) !important;
box-shadow: 0 8px 20px rgba(15,120,146,.18);
}
.lp-submit:hover { background: linear-gradient(135deg,#18a1ba,#0d6b8b) !important; }
.lp-login-card .captcha-inline { border-color: #d5e6ee; background: #f7fbfd; }
.lp-login-card .captcha-inline-hd { color: #6f8798; }
.lp-login-card .login-captcha-question { background: #f5fafc; border-color: #d5e6ee; color: #173b50; }
.lp-login-card .captcha-slider-tip { color: #7e95a5; }
.lp-premium-note { border-color: #ecdcb9; background: #fffaf0; }
.lp-premium-note > span { color: #c28b24; }
.lp-premium-note b { color: #92631a; }
.lp-premium-note small { color: #8a7d68; }
.lp-login-foot { border-top-color: #e3edf2; color: #8a9eac; }
.lp-mini-alerts { background: rgba(255,255,255,.9); }
.lp-foot { background: rgba(255,255,255,.55); }
/* ================= 首页登录入口卡 ================= */
.lp-access-card {
flex: 0 0 auto; padding: 18px 20px 13px; border-radius: 15px;
border: 1px solid #d3e5ee; background: linear-gradient(160deg,#ffffff,#f5fbfd);
box-shadow: 0 16px 40px rgba(14,53,75,.11); color: #1d445b;
}
.lp-access-kicker { display: block; font-size: 8px; letter-spacing: 2px; color: #0d849b; font-weight: 800; margin-bottom: 5px; }
.lp-access-card h2 { margin: 0; color: #0b2e43; font-size: 23px; line-height: 1.2; font-weight: 800; letter-spacing: -.2px; }
.lp-access-sub { margin: 5px 0 12px; color: #7a91a1; font-size: 10px; line-height: 1.6; }
.lp-access-list { display: grid; gap: 7px; margin-bottom: 13px; }
.lp-access-list > div { display: grid; grid-template-columns: 25px minmax(0,1fr); column-gap: 8px; align-items: start;
padding: 7px 8px; border-radius: 8px; background: #f7fbfd; border: 1px solid #e4eff4; }
.lp-access-list > div > span { grid-row: 1 / span 2; color: #0b8ba2; font-size: 9px; font-weight: 800; letter-spacing: .5px; padding-top: 1px; }
.lp-access-list b { color: #23516a; font-size: 11px; font-weight: 700; }
.lp-access-list small { color: #7e95a5; font-size: 9px; line-height: 1.5; margin-top: 1px; }
.lp-access-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 42px;
border-radius: 8px; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .5px;
background: linear-gradient(135deg,#0f8ba4,#0d5c7b); box-shadow: 0 8px 20px rgba(15,120,146,.18); }
.lp-access-btn:hover { background: linear-gradient(135deg,#18a1ba,#0d6b8b); transform: translateY(-1px); }
.lp-access-note { margin-top: 10px; padding: 8px 9px; border-radius: 7px; border: 1px solid #ecdcb9; background: #fffaf0;
color: #8a7d68; font-size: 9px; line-height: 1.5; }
.lp-access-note > span { color: #c28b24; margin-right: 5px; }
.lp-access-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 9px;
padding-top: 8px; border-top: 1px solid #e4eef3; color: #8a9eac; font-size: 8.5px; }
.lp-access-foot a { color: #0b8198; font-weight: 600; }
@media (max-width: 1366px) {
.lp-access-card { padding: 14px 15px 10px; }
.lp-access-card h2 { font-size: 20px; }
.lp-access-list > div { padding: 6px 7px; }
.lp-access-btn { height: 38px; font-size: 11.5px; }
.lp-access-note { display: none; }
}