/* dist.css —— 同学分布图（2026-11-09）
   省级方块分布图，零外部依赖。 */

.dist-hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#1e3a5f 0%,#2c5282 52%,#2a8f8f 100%)}
.dist-hero:after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.15),transparent 46%)}
.dist-hero .wrap{position:relative;z-index:1;padding:46px 20px 50px}
.dist-hero h1{margin:0 0 8px;font-size:27px;font-weight:600;letter-spacing:.4px}
.dist-hero p{margin:0;font-size:14px;color:rgba(255,255,255,.82)}
.dist-hero .nums{display:flex;gap:34px;margin-top:24px;flex-wrap:wrap}
.dist-hero .nums div{font-size:12px;color:rgba(255,255,255,.7)}
.dist-hero .nums b{display:block;font-size:25px;color:#fff;font-weight:600;line-height:1.25}

.dist-body{padding:26px 0 40px}
.dist-tip{border-radius:10px;padding:11px 16px;font-size:13px;margin-bottom:18px}
.dist-tip.ok{background:#e8f5f1;color:#1f6b62;border:1px solid #c6e8dd}
.dist-tip.err{background:#fdeceb;color:#9c3b33;border:1px solid #f3cfcb}

.dist-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}

/* 图卡片 */
.dist-card{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:18px 18px 12px}
.dist-mapwrap{overflow-x:auto;padding-bottom:2px}
.dist-map{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;min-width:480px}
.tile{aspect-ratio:1;min-height:40px;border-radius:8px;background:#f6f9fb;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#c8d3dd;font-size:10px;line-height:1.1;user-select:none;white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.tile em{font-style:normal;letter-spacing:.2px}
.tile b{font-size:13px;font-weight:600;line-height:1.15;margin-top:1px}
.tile.has{cursor:pointer;color:#3d7a99}
.tile.lv1{background:#dcebf3}
.tile.lv2{background:#a9cfe1;color:#1d4b67}
.tile.lv3{background:#5d9dba;color:#fff}
.tile.lv4{background:linear-gradient(135deg,#2c5282,#2a8f8f);color:#fff}
.tile.has:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(44,82,130,.2)}
.tile.on{outline:2px solid #2a8f8f;outline-offset:1px}

.dist-legend{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;color:#8fa3b5;
  flex-wrap:wrap;padding:10px 2px 0;border-top:1px dashed #eef2f6}
.dist-legend .lg{width:14px;height:14px;border-radius:3px;display:inline-block}
.dist-legend .lg1{background:#dcebf3}
.dist-legend .lg2{background:#a9cfe1}
.dist-legend .lg3{background:#5d9dba}
.dist-legend .lg4{background:linear-gradient(135deg,#2c5282,#2a8f8f)}
.dist-legend em{margin-left:auto;font-style:normal;color:#b3c0cc;font-size:11px}

/* 侧栏 */
.dist-panel{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:18px 20px;margin-bottom:18px}
.dist-panel h3,.rank-box h3{margin:0 0 12px;font-size:14px;font-weight:600;color:#2c5282}
.dist-panel h3 span,.rank-box h3 span{color:#2a8f8f}
.dp-note{margin:0 0 12px;font-size:12px;color:#9aa9b8;line-height:1.7}

.plist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.plist li{background:#f2f6fa;border-radius:16px;padding:5px 12px;font-size:13px;color:#2d3748;
  display:flex;align-items:center;gap:6px;max-width:100%}
.plist li i{font-style:normal;font-size:11px;color:#8fa3b5}

/* 表单 */
.dist-form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.dist-form select,.dist-form input{width:100%;height:38px;border:1px solid #dfe6ee;border-radius:8px;
  padding:0 10px;font-size:14px;background:#fff;color:#2d3748}
.dist-form select:focus,.dist-form input:focus{outline:0;border-color:#2a8f8f;box-shadow:0 0 0 3px rgba(42,143,143,.12)}
.dist-form button{width:100%;border:0;cursor:pointer;font-family:inherit}

/* 排行 */
.dist-rank{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.rank-box{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:18px 20px}
.rank-box.lost{margin-top:18px}
.rk{list-style:none;margin:0;padding:0}
.rk li{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;color:#4a5568}
.rk .nm{width:74px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .bar{flex:1;height:7px;border-radius:4px;background:#f0f4f8;overflow:hidden}
.rk .bar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#2c5282,#2a8f8f)}
.rk .ct{width:22px;text-align:right;font-size:12px;color:#8fa3b5;flex:none}

@media(max-width:820px){
  .dist-grid{grid-template-columns:1fr}
  .dist-rank{grid-template-columns:1fr}
  .dist-hero h1{font-size:22px}
  .dist-hero .nums{gap:24px}
}
@media(max-width:600px){
  /* 说明文字原来靠右 margin-left:auto，在窄屏会把卡片撑宽后被 body 的
     overflow-x:hidden 裁掉，这里让它独占一行 */
  .dist-legend em{margin-left:0;flex:1 0 100%;margin-top:8px;text-align:left;line-height:1.6}
  .dist-map{min-width:430px;gap:4px}
  .tile{font-size:9px;border-radius:6px;min-height:32px}
  .tile b{font-size:12px}
  .dist-form .row{grid-template-columns:1fr}
  .rk .nm{width:62px}
}

/* 首页迷你分布模块（2026-11-09） */
.mini{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;
  background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:20px 24px}
.mini-map{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;width:288px;flex:none}
.mt{aspect-ratio:1;border-radius:4px;background:#e9eff6;display:block;transition:.2s}
.mt.has{background:#c3dce9}
.mt.lv2{background:#a3cbdd}
.mt.lv3{background:#5d9dba}
.mt.lv4{background:linear-gradient(135deg,#2c5282,#2a8f8f)}
.mini-info{min-width:0}
.mini-row{display:flex;gap:30px;flex-wrap:wrap}
.mini-row div{display:flex;flex-direction:column;gap:2px}
.mini-row b{font-size:23px;font-weight:600;color:#2c5282;line-height:1.15}
.mini-row span{font-size:12px;color:#9aa9b8}
.mini-note{margin:10px 0 14px;font-size:13px;color:#718096;line-height:1.7}
@media(max-width:760px){
  .mini{grid-template-columns:1fr;gap:18px}
  .mini-map{width:100%;max-width:300px}
}