:root{
  --mg-blue:#1f6fe0;
  --mg-text:#2b3038;
  --mg-sub:#8d95a1;
  --mg-line:#e5eaf1;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#fff;color:var(--mg-text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
button,input,select{font:inherit;}
button{color:inherit;}

.mg-top{background:#fff;}
.mg-top-in{
  max-width:1220px;height:60px;margin:0 auto;padding:0 30px;
  display:flex;align-items:center;gap:0;
}
.mg-logo{display:flex;align-items:baseline;white-space:nowrap;line-height:1;}
.mg-logo .f{
  font-size:29px;font-weight:800;font-style:italic;letter-spacing:-1.2px;
  color:#1e5fd0;
}
.mg-logo .c{font-size:26px;font-weight:700;color:#2c3748;letter-spacing:1px;}
.mg-slogan{
  margin-left:14px;padding-left:14px;border-left:1px solid #e2e7ee;
  font-size:12px;color:#a8afba;letter-spacing:.5px;white-space:nowrap;
}
.mg-top-right{margin-left:auto;display:flex;align-items:center;gap:22px;}
.mg-user{
  display:flex;align-items:center;gap:7px;
  font-size:14px;color:#4a515c;white-space:nowrap;
}
.mg-user svg{color:#a9b0ba;margin-top:1px;}
.mg-user em{
  font-style:normal;font-size:9px;font-weight:700;color:#fff;letter-spacing:.3px;
  padding:1.5px 4px;border-radius:3px;
  background:linear-gradient(180deg,#ffbd4a,#f09812);
}
.mg-user:hover{color:var(--mg-blue);}
.mg-search{
  width:268px;height:38px;padding:0 6px 0 15px;
  border:1px solid #dfe5ed;border-radius:19px;background:#fff;
  display:flex;align-items:center;gap:6px;
  transition:border-color .18s,box-shadow .18s;
}
.mg-search:focus-within{border-color:#9cc1f5;box-shadow:0 0 0 3px rgba(31,111,224,.08);}
.mg-search input{
  flex:1;min-width:0;border:0;outline:0;background:none;
  font-size:13px;color:#333a44;
}
.mg-search input::placeholder{color:#b5bcc6;}
.mg-search button{
  width:32px;height:32px;border:0;border-radius:50%;background:none;
  display:flex;align-items:center;justify-content:center;color:#8c95a2;cursor:pointer;
}
.mg-search button:hover{background:#f2f6fb;color:var(--mg-blue);}

.mg-main{max-width:1220px;margin:0 auto;padding:0 44px 52px;}

.mg-banner{
  position:relative;height:116px;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.55),transparent 62%),
    radial-gradient(circle at 8% 22%,rgba(255,255,255,.5),transparent 26%),
    radial-gradient(circle at 91% 78%,rgba(255,255,255,.34),transparent 24%),
    linear-gradient(100deg,#83d0f4 0%,#a9e0fa 36%,#c3ecff 58%,#8fd2f5 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.mg-banner h1{
  position:relative;z-index:2;margin:0;
  font-size:32px;font-weight:700;letter-spacing:1px;color:#fff;
  text-shadow:0 2px 10px rgba(38,132,193,.22);
}
.mg-banner h1 span{font-size:29px;font-weight:600;letter-spacing:.5px;}
.mg-deco{position:absolute;z-index:1;filter:drop-shadow(0 4px 10px rgba(72,150,196,.14));}
.mg-deco-pad{left:42px;top:26px;width:84px;height:58px;opacity:.9;}
.mg-deco-clock{left:122px;top:22px;width:72px;height:72px;}
.mg-deco-star{right:104px;top:18px;width:70px;height:70px;}
.mg-deco-down{right:32px;top:16px;width:64px;height:64px;}

.mg-toolbar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  margin-top:18px;padding-bottom:12px;
}
.mg-tabs{display:flex;align-items:center;gap:32px;}
.mg-tabs button{
  position:relative;border:0;background:none;padding:0 0 8px;cursor:pointer;
  font-size:16px;font-weight:600;color:#383f49;line-height:1;
}
.mg-tabs button:hover{color:var(--mg-blue);}
.mg-tabs button.on{color:var(--mg-blue);}
.mg-tabs button.on::after{
  content:"";position:absolute;left:50%;bottom:0;width:18px;height:3px;
  border-radius:2px;background:var(--mg-blue);transform:translateX(-50%);
}
.mg-filters{display:flex;align-items:center;gap:12px;padding-bottom:2px;}
.mg-mini-search{
  width:162px;height:34px;padding:0 11px;border:1px solid #dfe5ed;border-radius:17px;
  display:flex;align-items:center;gap:6px;color:#a3aab5;
}
.mg-mini-search:focus-within{border-color:#9cc1f5;}
.mg-mini-search input{
  width:100%;min-width:0;border:0;outline:0;background:none;
  font-size:12.5px;color:#333a44;
}
.mg-mini-search input::placeholder{color:#b3bac4;}
.mg-mini-search svg{flex:none;}
.mg-filters select{
  width:164px;height:34px;padding:0 28px 0 14px;border:1px solid #dfe5ed;border-radius:17px;
  outline:0;background:#fff;color:#5a626d;font-size:12.5px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d95a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.mg-filters select:focus{border-color:#9cc1f5;}

.mg-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 20px;
  margin-top:8px;
}
.mg-card{
  position:relative;display:block;aspect-ratio:.82;border-radius:9px;overflow:hidden;
  background:#e8eef7;box-shadow:0 2px 8px rgba(35,65,105,.06);
  transition:transform .18s ease,box-shadow .18s ease;
}
.mg-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(35,75,125,.16);}
.mg-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;
}
.mg-card:hover img{transform:scale(1.04);}
.mg-card.is-icon{background:linear-gradient(160deg,#f2f7fd,#dde9f7);}
.mg-card.is-icon img{object-fit:contain;padding:26px 30px 62px;filter:drop-shadow(0 8px 14px rgba(40,75,120,.16));}
.mg-card.is-icon:hover img{transform:scale(1.03);}
.mg-card.is-icon::after{height:48%;background:linear-gradient(180deg,rgba(8,18,32,0),rgba(8,18,32,.58));}
.mg-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;
  background:linear-gradient(180deg,rgba(8,18,32,0),rgba(8,18,32,.2) 42%,rgba(8,18,32,.72) 100%);
}
.mg-card-info{
  position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff;
}
.mg-card-info b{
  display:block;font-size:15px;font-weight:600;line-height:1.35;
  text-shadow:0 1px 5px rgba(0,0,0,.32);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mg-card-meta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:5px;font-size:11.5px;color:rgba(255,255,255,.92);
}
.mg-card-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mg-card-meta em{font-style:normal;flex:none;color:#fff;opacity:.92;}

.mg-empty[hidden]{display:none;}
.mg-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:80px 20px 90px;color:#a2aab6;text-align:center;
}
.mg-empty svg{color:#c4ccd8;}
.mg-empty b{margin-top:14px;font-size:16px;color:#5c6572;}
.mg-empty span{margin-top:7px;font-size:13px;}
.mg-empty a{
  margin-top:18px;padding:9px 22px;border-radius:18px;
  background:var(--mg-blue);color:#fff;font-size:13px;
}

@media (max-width:1080px){
  .mg-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .mg-deco-pad{left:20px;opacity:.7;}
  .mg-deco-clock{left:96px;}
  .mg-deco-star{right:70px;opacity:.8;}
}
@media (max-width:900px){
  .mg-slogan{display:none;}
  .mg-search{width:210px;}
  .mg-banner h1{font-size:26px;}
  .mg-banner h1 span{font-size:23px;}
  .mg-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .mg-deco-star{right:28px;opacity:.55;}
  .mg-deco-down{display:none;}
}
@media (max-width:680px){
  .mg-top-in{height:62px;padding:0 16px;}
  .mg-logo .f{font-size:24px;}
  .mg-logo .c{font-size:22px;}
  .mg-user em{display:none;}
  .mg-user span{max-width:72px;overflow:hidden;text-overflow:ellipsis;}
  .mg-search{width:150px;height:34px;}
  .mg-top-right{gap:12px;}
  .mg-main{padding:0 16px 40px;}
  .mg-banner{height:92px;margin-top:10px;}
  .mg-banner h1{font-size:20px;letter-spacing:0;}
  .mg-banner h1 span{font-size:18px;}
  .mg-deco{opacity:.34;}
  .mg-deco-clock{left:18px;top:16px;width:56px;}
  .mg-deco-pad{display:none;}
  .mg-deco-star{right:14px;top:16px;width:54px;}
  .mg-toolbar{flex-wrap:wrap;gap:12px;margin-top:14px;padding-bottom:8px;}
  .mg-tabs{gap:22px;}
  .mg-tabs button{font-size:14.5px;}
  .mg-filters{width:100%;gap:10px;}
  .mg-mini-search{flex:1;width:auto;}
  .mg-filters select{width:118px;flex:none;}
  .mg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;}
  .mg-card-info{left:10px;right:10px;bottom:9px;}
  .mg-card-info b{font-size:13.5px;}
  .mg-card-meta{font-size:10.5px;margin-top:3px;}
}

@media (max-width:520px){
  .mg-user{display:none;}
  .mg-top-right{margin-left:auto;}
  .mg-search{width:176px;}
}