:root{
  --bg:#ffffff;
  --panel:#f5f5f5;
  --panel2:#eeeeee;
  --text:#1a1a1a;
  --muted:#666666;
  --brand:#66B3FF;
  --brand2:#4a9eff;
  --border:rgba(0,0,0,.1);
  --shadow: 0 10px 30px rgba(0,0,0,.1);
  --radius: 16px;
  --radius2: 12px;
  --success: #4ade80;
  --error: #f87171;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #ffffff;
  color:var(--text);
  min-height: 100vh;
}
a{color:inherit; text-decoration:none}
.container{width:min(1100px, 92vw); margin:0 auto; padding:18px 0}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--border);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:14px}
.brand{
  font-weight:800;
  letter-spacing:.5px;
  font-size:18px;
  display:inline-flex; align-items:center; gap:10px;
}
.brand:before{
  content:"";
  width:10px; height:10px; border-radius:99px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 6px rgba(102,227,255,.08);
}
.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.nav__link{
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--muted);
  font-weight:600;
  transition:.18s ease;
}
.nav__link:hover{color:var(--text); border-color:var(--border); background:rgba(255,255,255,.03)}
.nav__link--active{color:var(--text); background:rgba(102,227,255,.08); border-color:rgba(102,227,255,.22)}
.footer{border-top:1px solid var(--border); color:var(--muted); margin-top:30px}
.footer__inner{display:flex; justify-content:center; padding:18px 0}

.hero{
  margin-top:10px;
  padding:22px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.8);
  box-shadow: var(--shadow);
  color:var(--text);
}
.hero--small{padding:18px}
.hero h1{margin:0 0 8px; font-size:28px; color:var(--text)}
.hero p{margin:0; color:var(--muted); line-height:1.55}
.filters{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.input, .select, .textarea{
  height:42px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: #ffffff;
  color:#0b1220;
  outline:none;
  font-family: inherit;
}
.select{color:#0b1220}
.input::placeholder{color: rgba(11,18,32,.55)}
.textarea{
  min-height: 120px;
  padding: 12px;
  resize: vertical;
}
.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(102,227,255,.4);
  background: #ffffff;
}
.input{flex:1; min-width: 220px}
.select{min-width:160px}
.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.grid--small{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 920px){ .grid{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (max-width: 560px){
  .grid{grid-template-columns: 1fr}
  .nav{gap:6px}
  .nav__link{padding:9px 10px}
}
.card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius: var(--radius2);
  background: var(--panel);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover{transform: translateY(-2px); border-color: rgba(102,179,255,.3); background: #fafafa}
.card__media{
  aspect-ratio: 16/9; 
  background: rgba(255,255,255,.03);
  overflow: hidden;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__img{
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block;
  flex-shrink: 0;
}
.card__body{padding:12px}
.card__title{font-weight:800; font-size:16px; margin-bottom:6px}
.card__desc{color:var(--muted); font-size:13px; line-height:1.45; min-height: 38px}
.card__tags{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
.tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size:12px;
  font-weight:700;
}
.empty{
  margin:20px 0;
  padding:18px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius: var(--radius2);
  color: var(--muted);
  text-align:center;
}
.hidden{display:none !important}

.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.pill{
  cursor:pointer;
  border:1px solid var(--border);
  background: rgba(12,22,40,.55);
  color: var(--text);
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
}
.pill:hover{border-color: rgba(102,227,255,.25)}
.pill__count{opacity:.7; margin-left:6px}
.sectionTitle{margin:14px 0 6px; font-weight:900; color:var(--text)}

.rankList{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.rankRow{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius: var(--radius2);
  background: rgba(15,26,46,.55);
}
.rankRow:hover{border-color: rgba(102,227,255,.25)}
.rankRow__idx{
  width:34px; height:34px;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(102,227,255,.18), rgba(138,125,255,.18));
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
}
.rankRow__name{flex:1; font-weight:900}
.rankRow__meta{color:var(--muted); font-weight:700; font-size:12px}

.gameHero{
  margin-top:10px;
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:18px;
  padding:18px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
}
@media (max-width: 900px){ .gameHero{grid-template-columns: 1fr; } }
.gameHero__media{border-radius: var(--radius2); overflow:hidden; border:1px solid var(--border); background: rgba(255,255,255,.03)}
.gameHero__img{width:100%; height:100%; display:block; object-fit:cover}
.gameHero__ph{padding:40px 0; text-align:center; color:var(--muted)}
.gameHero__title{margin:0 0 8px; font-size:28px}
.gameHero__desc{margin:10px 0 0; color:var(--muted); line-height:1.6}
.gameHero__actions{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(8, 20, 40, .72);
  color: #ffffff;
  font-weight:900;
  cursor: pointer;
  transition: all .18s ease;
}
.btn:hover{border-color: rgba(102,227,255,.25); transform: translateY(-1px)}
.btn:disabled{opacity: .5; cursor: not-allowed}
.btn--primary{
  background: #ff8a00;
  border-color: rgba(255, 138, 0, .6);
  color: #0b1220;
}
.btn--small{
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
}
.btn--danger{
  background: rgba(248,113,113,.15);
  border-color: rgba(248,113,113,.3);
}
.muted{color:var(--muted)}
.link{color: var(--brand); font-weight:900; cursor: pointer}
.link:hover{text-decoration: underline}
.panel{
  margin-top:14px;
  border:1px solid var(--border);
  border-radius: var(--radius2);
  background: var(--panel);
  overflow:hidden;
}
.panel__hd{padding:12px 14px; border-bottom:1px solid var(--border)}
.panel__hd h2{margin:0; font-size:16px}
.panel__bd{padding:12px 14px; color:var(--muted); line-height:1.65}
/* Game Container - 确保可以正常显示 */
#gameContainer{display:none}
#gameContainer[style*="display: block"]{display:block !important; visibility:visible !important; opacity:1 !important}
.game-frame{width:100%; border:none; border-radius:8px; background:#000; margin:0 auto; display:block}
.game-frame--landscape{height:800px; max-width:480px}
.game-frame--portrait{height:800px; max-width:480px}
@media (max-width:768px){
  .game-frame--landscape{height:600px; max-width:100%}
  .game-frame--portrait{height:600px; max-width:100%}
  #gameContainer:fullscreen,
  #gameContainer:-webkit-full-screen,
  #gameContainer:-moz-full-screen,
  #gameContainer:-ms-fullscreen{width:100vw; height:100vh; position:fixed; top:0; left:0; overflow:hidden}
  #gameContainer:fullscreen .panel__hd,
  #gameContainer:-webkit-full-screen .panel__hd,
  #gameContainer:-moz-full-screen .panel__hd,
  #gameContainer:-ms-fullscreen .panel__hd{display:none !important}
  #gameContainer:fullscreen #fullscreenBtn,
  #gameContainer:-webkit-full-screen #fullscreenBtn,
  #gameContainer:-moz-full-screen #fullscreenBtn,
  #gameContainer:-ms-fullscreen #fullscreenBtn{display:none !important}
  #gameContainer:fullscreen #closeGameBtn,
  #gameContainer:-webkit-full-screen #closeGameBtn,
  #gameContainer:-moz-full-screen #closeGameBtn,
  #gameContainer:-ms-fullscreen #closeGameBtn{display:none !important}
  #gameContainer:fullscreen .panel__bd,
  #gameContainer:-webkit-full-screen .panel__bd,
  #gameContainer:-moz-full-screen .panel__bd,
  #gameContainer:-ms-fullscreen .panel__bd{width:100vw; height:100vh; padding:0; margin:0; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative}
  #gameContainer:fullscreen .game-frame,
  #gameContainer:-webkit-full-screen .game-frame,
  #gameContainer:-moz-full-screen .game-frame,
  #gameContainer:-ms-fullscreen .game-frame{width:100%; height:100%; max-width:480px; max-height:100vh; margin:0 auto; position:relative}
  #gameContainer:fullscreen .game-frame--portrait,
  #gameContainer:-webkit-full-screen .game-frame--portrait,
  #gameContainer:-moz-full-screen .game-frame--portrait,
  #gameContainer:-ms-fullscreen .game-frame--portrait{max-width:480px; margin:0 auto}
  #gameContainer:fullscreen .game-frame--landscape,
  #gameContainer:-webkit-full-screen .game-frame--landscape,
  #gameContainer:-moz-full-screen .game-frame--landscape,
  #gameContainer:-ms-fullscreen .game-frame--landscape{max-width:480px; margin:0 auto}
}
#gameContainer:fullscreen{width:100vw; height:100vh; margin:0; border-radius:0; display:flex; flex-direction:column; background:#000; position:fixed; top:0; left:0; z-index:9999}
#gameContainer:fullscreen .panel__hd{display:none !important}
#gameContainer:fullscreen #fullscreenBtn{display:none !important}
#gameContainer:fullscreen #closeGameBtn{display:none !important}
#gameContainer:fullscreen .panel__bd{flex:1; padding:0; margin:0; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; width:100vw; height:100vh; position:relative}
#gameContainer:fullscreen .game-frame{width:100%; height:100%; max-width:480px; max-height:100vh; border-radius:0; margin:0 auto; padding:0; display:block; border:none; position:relative}
#gameContainer:fullscreen .game-frame--portrait{max-width:480px; margin:0 auto}
#gameContainer:fullscreen .game-frame--landscape{max-width:480px; margin:0 auto}
#gameContainer:-webkit-full-screen{width:100vw; height:100vh; margin:0; border-radius:0; display:flex; flex-direction:column; background:#000; position:fixed; top:0; left:0; z-index:9999}
#gameContainer:-webkit-full-screen .panel__hd{display:none !important}
#gameContainer:-webkit-full-screen #fullscreenBtn{display:none !important}
#gameContainer:-webkit-full-screen #closeGameBtn{display:none !important}
#gameContainer:-webkit-full-screen .panel__bd{flex:1; padding:0; margin:0; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; width:100vw; height:100vh; position:relative}
#gameContainer:-webkit-full-screen .game-frame{width:100%; height:100%; max-width:480px; max-height:100vh; border-radius:0; margin:0 auto; padding:0; display:block; border:none; position:relative}
#gameContainer:-webkit-full-screen .game-frame--portrait{max-width:480px; margin:0 auto}
#gameContainer:-webkit-full-screen .game-frame--landscape{max-width:480px; margin:0 auto}
#gameContainer:-moz-full-screen{width:100vw; height:100vh; margin:0; border-radius:0; display:flex; flex-direction:column; background:#000; position:fixed; top:0; left:0; z-index:9999}
#gameContainer:-moz-full-screen .panel__hd{display:none !important}
#gameContainer:-moz-full-screen #fullscreenBtn{display:none !important}
#gameContainer:-moz-full-screen #closeGameBtn{display:none !important}
#gameContainer:-moz-full-screen .panel__bd{flex:1; padding:0; margin:0; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; width:100vw; height:100vh; position:relative}
#gameContainer:-moz-full-screen .game-frame{width:100%; height:100%; max-width:480px; max-height:100vh; border-radius:0; margin:0 auto; padding:0; display:block; border:none; position:relative}
#gameContainer:-moz-full-screen .game-frame--portrait{max-width:480px; margin:0 auto}
#gameContainer:-moz-full-screen .game-frame--landscape{max-width:480px; margin:0 auto}
#gameContainer:-ms-fullscreen{width:100vw; height:100vh; margin:0; border-radius:0; display:flex; flex-direction:column; background:#000; position:fixed; top:0; left:0; z-index:9999}
#gameContainer:-ms-fullscreen .panel__hd{display:none !important}
#gameContainer:-ms-fullscreen #fullscreenBtn{display:none !important}
#gameContainer:-ms-fullscreen #closeGameBtn{display:none !important}
#gameContainer:-ms-fullscreen .panel__bd{flex:1; padding:0; margin:0; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; width:100vw; height:100vh; position:relative}
#gameContainer:-ms-fullscreen .game-frame{width:100%; height:100%; max-width:480px; max-height:100vh; border-radius:0; margin:0 auto; padding:0; display:block; border:none; position:relative}
#gameContainer:-ms-fullscreen .game-frame--portrait{max-width:480px; margin:0 auto}
#gameContainer:-ms-fullscreen .game-frame--landscape{max-width:480px; margin:0 auto}
.list{margin:0; padding-left:18px; list-style: none}
.list li{margin: 8px 0}
.masonry{columns: 3; column-gap: 10px}
@media (max-width: 920px){ .masonry{columns:2} }
@media (max-width: 560px){ .masonry{columns:1} }
.shot{display:block; margin:0 0 10px; break-inside: avoid}
.shot img{width:100%; border-radius:12px; border:1px solid var(--border)}
.comments{display:flex; flex-direction:column; gap:10px}
.comment{border:1px solid var(--border); border-radius:12px; padding:10px 12px; background: rgba(12,22,40,.45)}
.comment__meta{font-weight:900; color:var(--text); margin-bottom:4px; display: flex; align-items: center; gap: 8px}
.comment__text{color:var(--muted); margin-top: 6px}
.comment__rating{color: #ffd700; font-size: 14px}

/* Flash messages */
.flash-messages{margin-top: 14px}
.flash{
  padding: 12px 16px;
  border-radius: var(--radius2);
  margin-bottom: 10px;
  border: 1px solid var(--border);
}
.flash--success{
  background: rgba(74,222,128,.15);
  border-color: rgba(74,222,128,.3);
  color: var(--success);
}
.flash--error{
  background: rgba(248,113,113,.15);
  border-color: rgba(248,113,113,.3);
  color: var(--error);
}

/* Forms */
.form-group{margin-bottom: 16px}
#commentForm{max-width:800px; margin:0 auto}
#commentForm .form-group{display:flex; flex-direction:column; align-items:center}
#commentForm .form-label{text-align:center; margin-bottom:8px}
#commentForm .select{text-align:center}
#commentForm .textarea{width:100%; max-width:100%; text-align:left}
#commentForm .form-actions{justify-content:center}
#postForm{max-width:900px; margin:0 auto; text-align:center; padding:24px}
#newPostForm{max-width:100%}
#newPostForm .form-group{display:flex; flex-direction:column; align-items:center; margin-bottom:20px}
#newPostForm .form-label{text-align:center; margin-bottom:10px; font-size:15px}
#newPostForm .input{width:100%; max-width:100%; text-align:left; padding:12px 16px; font-size:15px; border-radius:8px; border:2px solid var(--border); transition:all 0.2s ease}
#newPostForm .input:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(102,179,255,0.1)}
#newPostForm .select{text-align:center; padding:10px 16px; font-size:15px; border-radius:8px; border:2px solid var(--border); transition:all 0.2s ease}
#newPostForm .select:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(102,179,255,0.1)}
#newPostForm .textarea{width:100%; max-width:100%; text-align:left; padding:14px 18px; min-height:150px; font-size:15px; line-height:1.6; border-radius:8px; border:2px solid var(--border); transition:all 0.2s ease; resize:vertical}
#newPostForm .textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(102,179,255,0.1)}
#newPostForm .form-actions{justify-content:center; margin-top:24px}
.form-label{
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--text);
}
.form-actions{display: flex; gap: 10px; margin-top: 20px}

/* Auth pages (Login / Register) */
.auth-page {
  max-width: 440px;
  margin: 48px auto 60px;
  padding: 40px 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.auth-page h1 {
  text-align: center;
  margin: 0 0 8px;
  font-size: 26px;
  color: var(--text);
}
.auth-page .auth-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 28px;
}
.auth-page form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-page .form-group {
  width: 100%;
  max-width: 320px;
  margin-bottom: 18px;
}
.auth-page .form-label {
  text-align: center;
  margin-bottom: 8px;
}
.auth-page .input {
  width: 100%;
  max-width: 320px;
  display: block;
  margin: 0 auto;
  text-align: center;
  box-sizing: border-box;
}
.auth-page .form-actions {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  width: 100%;
  max-width: 320px;
}
.auth-page .form-actions .btn {
  width: 100%;
  justify-content: center;
}
.auth-page .auth-remember {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}
.auth-page .auth-tip {
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: var(--radius2);
  background: rgba(102, 179, 255, .08);
  border: 1px solid rgba(102, 179, 255, .2);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.auth-page .auth-tip strong { color: var(--text); }

/* Forum */
.forum-posts{display:flex; flex-direction:column; gap:12px}
.forum-post{
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  background: rgba(15,26,46,.55);
  padding: 14px;
  margin-bottom: 12px;
  transition: all .18s ease;
}
.forum-post:hover{border-color: rgba(102,227,255,.25)}
.forum-post__header{display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px}
.forum-post__title{font-weight: 900; font-size: 18px; margin: 0}
.forum-post__meta{color: var(--muted); font-size: 12px; margin-top: 4px}
.forum-post__content{color: var(--muted); line-height: 1.6; margin: 8px 0}
.forum-post__footer{display: flex; gap: 16px; margin-top: 12px; color: var(--muted); font-size: 12px}
.forum-post__pinned{background: rgba(102,227,255,.1); border-color: rgba(102,227,255,.3)}

/* Pagination */
.pagination{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.pagination a, .pagination span{
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15,26,46,.55);
  color: var(--text);
}
.pagination a:hover{background: rgba(15,26,46,.8); border-color: rgba(102,227,255,.25)}
.pagination .active{
  background: rgba(102,227,255,.15);
  border-color: rgba(102,227,255,.3);
}

/* Loading */
.loading{opacity: .6; pointer-events: none}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius2);
    padding: 16px 20px;
    box-shadow: var(--shadow);
    z-index: 10001;
    min-width: 300px;
    max-width: 500px;
    animation: slideIn 0.3s ease-out;
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast--success {
    border-left: 4px solid var(--success);
}

.toast--error {
    border-left: 4px solid var(--error);
}

.toast--info {
    border-left: 4px solid var(--brand);
}

.toast__icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast__content {
    flex: 1;
}

.toast__title {
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text);
}

.toast__message {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.toast__close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast__close:hover {
    color: var(--text);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn--loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* 图片优化 - 响应式图片 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 加载状态 - 骨架屏 */
.skeleton {
  background: linear-gradient(90deg, var(--panel) 25%, var(--panel2) 50%, var(--panel) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 优化滚动性能 */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 减少重绘和重排 */
.card, .panel, .topbar {
  will-change: transform;
}