#hcode-homepage-redesign{--blue:#087fd8;--cyan:#1dc4d7;--ink:#14233b;--muted:#687990;position:relative;width:100%;min-height:calc(100vh - 60px);padding:30px 24px 70px;background:linear-gradient(135deg,#e8f9ff 0%,#f8fbff 52%,#edfdf7 100%);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);box-sizing:border-box}
#hcode-homepage-redesign *{box-sizing:border-box}
#header{background:rgba(255,255,255,.96)!important;border-bottom:1px solid #e7eef5!important;box-shadow:0 7px 22px rgba(35,72,107,.08)!important}
#header>.el-menu.el-menu--horizontal{display:flex;align-items:center;min-height:64px;border-bottom:0!important;background:transparent!important;padding:0 10px}
#header>.el-menu.el-menu--horizontal>.el-menu-item,#header>.el-menu.el-menu--horizontal>.el-submenu>.el-submenu__title{height:38px!important;line-height:38px!important;margin:0 1px!important;padding:0 5px!important;border-bottom:0!important;border-radius:8px;color:#64758e!important;font-size:14px;font-weight:800;letter-spacing:0;white-space:nowrap;transition:background .18s,color .18s,box-shadow .18s}
#header>.el-menu.el-menu--horizontal>.el-menu-item i,#header>.el-menu.el-menu--horizontal>.el-submenu>.el-submenu__title i{color:#64758e!important;font-size:16px;margin-right:2px!important;transition:color .18s}
#header>.el-menu.el-menu--horizontal>.el-menu-item:hover,#header>.el-menu.el-menu--horizontal>.el-submenu>.el-submenu__title:hover{background:#edf7fd!important;color:#087db8!important}
#header>.el-menu.el-menu--horizontal>.el-menu-item.is-active,#header>.el-menu.el-menu--horizontal>.el-submenu.is-active:has(>.el-submenu__title>i.el-icon-s-data)>.el-submenu__title{background:#0785bd!important;color:#fff!important;box-shadow:0 7px 16px rgba(0,132,190,.32)!important}
#header>.el-menu.el-menu--horizontal>.el-menu-item.is-active,#header>.el-menu.el-menu--horizontal>.el-submenu.is-active:has(>.el-submenu__title>i.el-icon-s-data)>.el-submenu__title{color:#fff!important;-webkit-text-fill-color:#fff!important}
#header>.el-menu.el-menu--horizontal>.el-menu-item.is-active>i[class],#header>.el-menu.el-menu--horizontal>.el-submenu.is-active:has(>.el-submenu__title>i.el-icon-s-data)>.el-submenu__title>i[class]:first-child{display:inline-block!important;width:16px!important;height:16px!important;margin-right:3px!important;background-color:#fff!important;background-image:none!important;font-size:0!important;vertical-align:middle!important;-webkit-mask-position:center!important;-webkit-mask-repeat:no-repeat!important;-webkit-mask-size:contain!important;mask-position:center!important;mask-repeat:no-repeat!important;mask-size:contain!important}
#header>.el-menu.el-menu--horizontal>.el-menu-item.is-active>i[class]:before,#header>.el-menu.el-menu--horizontal>.el-submenu.is-active:has(>.el-submenu__title>i.el-icon-s-data)>.el-submenu__title>i[class]:first-child:before{content:none!important;display:none!important}
#header .is-active>i.el-icon-s-home{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 10.7 12 3l9 7.7v9.1c0 .7-.5 1.2-1.2 1.2h-5.3v-6.2h-5V21H4.2C3.5 21 3 20.5 3 19.8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 10.7 12 3l9 7.7v9.1c0 .7-.5 1.2-1.2 1.2h-5.3v-6.2h-5V21H4.2C3.5 21 3 20.5 3 19.8z'/%3E%3C/svg%3E")}
#header .is-active>i.el-icon-s-grid{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/svg%3E")}
#header .is-active>i.el-icon-s-claim{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 3h8l1 2h2v16H5V5h2zm1 7 2.2 2.2L16 7.4l1.4 1.4-6.2 6.2-3.6-3.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 3h8l1 2h2v16H5V5h2zm1 7 2.2 2.2L16 7.4l1.4 1.4-6.2 6.2-3.6-3.6z'/%3E%3C/svg%3E")}
#header .is-active>i.el-icon-trophy{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v3h4v2c0 3-2 5-5 5.7A6 6 0 0 1 13 16v2h4v3H7v-3h4v-2a6 6 0 0 1-3-2.3C5 13 3 11 3 8V6h4zm0 5H5c0 1.8.9 2.9 2.3 3.5A9 9 0 0 1 7 8m10 0a9 9 0 0 1-.3 3.5C18.1 10.9 19 9.8 19 8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v3h4v2c0 3-2 5-5 5.7A6 6 0 0 1 13 16v2h4v3H7v-3h4v-2a6 6 0 0 1-3-2.3C5 13 3 11 3 8V6h4zm0 5H5c0 1.8.9 2.9 2.3 3.5A9 9 0 0 1 7 8m10 0a9 9 0 0 1-.3 3.5C18.1 10.9 19 9.8 19 8z'/%3E%3C/svg%3E")}
#header .is-active>i.el-icon-s-marketing,#header .is-active>i.el-icon-s-data,#header .is-active>i.fa-bar-chart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Crect x='3' y='12' width='4' height='9' rx='1'/%3E%3Crect x='10' y='5' width='4' height='16' rx='1'/%3E%3Crect x='17' y='8' width='4' height='13' rx='1'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Crect x='3' y='12' width='4' height='9' rx='1'/%3E%3Crect x='10' y='5' width='4' height='16' rx='1'/%3E%3Crect x='17' y='8' width='4' height='13' rx='1'/%3E%3C/g%3E%3C/svg%3E")}
#header .is-active>i.el-icon-s-comment{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v12H9l-5 4zm4 5h8v2H8zm0 4h6v2H8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v12H9l-5 4zm4 5h8v2H8zm0 4h6v2H8z'/%3E%3C/svg%3E")}
#header .is-active>i.fa-users{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8m6-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6M2 21v-2c0-3.3 2.7-6 6-6h2c3.3 0 6 2.7 6 6v2zm14-7c3.3 0 6 2.2 6 5v2h-4v-2c0-1.9-.7-3.6-2-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8m6-1a3 3 0 1 0 0-6 3 3 0 0 0 0 6M2 21v-2c0-3.3 2.7-6 6-6h2c3.3 0 6 2.7 6 6v2zm14-7c3.3 0 6 2.2 6 5v2h-4v-2c0-1.9-.7-3.6-2-5'/%3E%3C/svg%3E")}
#header>.el-menu.el-menu--horizontal>.el-submenu.is-active:has(>.el-submenu__title>i.el-icon-s-data)>.el-submenu__title .el-submenu__icon-arrow{color:#bcecff!important;-webkit-text-fill-color:#bcecff!important}
#header .logo{display:flex;align-items:center;margin-right:8px}
#header .logo .el-image{width:116px!important}
#header>.el-menu.el-menu--horizontal{display:flex!important;align-items:center!important}
#header>.el-menu.el-menu--horizontal>.drop-menu{margin-top:0!important;margin-bottom:0!important;margin-left:0!important;padding-left:0!important;flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;height:60px!important;line-height:1!important}
#header .drop-menu>.el-dropdown-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:100%!important;line-height:1!important;font-size:15px!important;font-weight:700!important;vertical-align:middle!important}
#header .drop-menu>.el-dropdown-link .oj-header-avatar{width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;min-height:28px!important;max-height:28px!important;aspect-ratio:1/1!important;border-radius:50%!important;flex:0 0 28px!important;display:inline-grid!important;place-items:center!important;margin-top:0!important;margin-bottom:0!important;margin-right:7px!important;transform:none!important;vertical-align:middle!important;box-sizing:border-box!important}
#header .drop-menu>.el-dropdown-link .oj-user-appearance{transform:none!important;vertical-align:middle!important;margin-left:5px!important;margin-right:2px!important}
#header .drop-menu>.el-dropdown-link .el-icon-caret-bottom{margin-left:3px!important;font-size:12px!important;vertical-align:middle!important;line-height:1!important;transform:none!important}
#header>.el-menu.el-menu--horizontal>.drop-avatar,#header .drop-avatar{width:30px!important;height:30px!important;min-width:30px!important;max-width:30px!important;min-height:30px!important;max-height:30px!important;aspect-ratio:1/1!important;border-radius:50%!important;flex:0 0 30px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0 8px 0 0!important;transform:none!important;align-self:center!important;overflow:hidden!important;box-sizing:border-box!important}
#header .drop-avatar img,#header .drop-avatar svg,#header .drop-avatar span,#header .drop-avatar .vue-avatar--wrapper{width:100%!important;height:100%!important;border-radius:50%!important;object-fit:cover!important;aspect-ratio:1/1!important;display:block!important}
#header>.el-menu.el-menu--horizontal>.drop-msg{margin-top:0!important;margin-bottom:0!important;flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;height:60px!important;line-height:1!important;align-self:center!important;transform:none!important}
#header .drop-msg .el-dropdown-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
#header #hcode-topbar-fn{transform:none!important;margin-top:0!important;margin-bottom:0!important;align-self:center!important}
#header>.el-menu.el-menu--horizontal>.el-menu-item.gesp-scratch-nav-item,#header .gesp-scratch-nav-item{height:38px!important;line-height:38px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle!important;margin:0 1px!important;padding:0 5px!important;color:#64758e!important;font-size:14px!important;font-weight:800!important;border-radius:8px!important;transition:background .18s,color .18s,box-shadow .18s!important}#header>.el-menu.el-menu--horizontal>.el-menu-item.gesp-scratch-nav-item:hover,#header .gesp-scratch-nav-item:hover{background:#edf7fd!important;color:#087db8!important}#header>.el-menu.el-menu--horizontal>.el-menu-item.gesp-scratch-nav-item.is-active,#header .gesp-scratch-nav-item.is-active{background:#0785bd!important;color:#fff!important}
#header .gesp-scratch-nav-icon{font-size:16px!important;line-height:1!important;display:inline-flex!important;align-items:center!important;margin-right:2px!important}
#header .gesp-scratch-nav-item span{line-height:38px!important;display:inline-block!important}
.hhome-shell{max-width:1432px;margin:auto;display:grid;grid-template-columns:minmax(0,2.55fr) minmax(360px,1fr);gap:28px}
.hhome-left,.hhome-right{display:flex;flex-direction:column;gap:20px;min-width:0}
.hhome-card{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.98);box-shadow:0 12px 30px rgba(44,91,132,.08);backdrop-filter:blur(18px);border-radius:9px}
.hhome-hero{position:relative;overflow:hidden;min-height:494px;padding:48px 40px 44px;background:#078be4 url('/home-hero-background-v3.png') center/cover no-repeat;border-color:rgba(92,220,255,.55);box-shadow:0 16px 38px rgba(0,104,190,.2)}
.hhome-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,94,180,.06),rgba(0,74,156,.16));pointer-events:none}
.hhome-hero-main,.hhome-tracks{position:relative;z-index:1}
.hhome-title{margin:0;text-align:center;font-size:50px;font-weight:900;letter-spacing:0;color:#fff;text-shadow:0 3px 14px rgba(0,57,119,.32)}
.hhome-domain{margin:12px auto 9px;width:max-content;padding:7px 22px;border-radius:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);color:#fff;font-family:Consolas,"SFMono-Regular","Liberation Mono",monospace;font-size:20px;font-weight:800;line-height:1.15;letter-spacing:.3px;text-shadow:0 1px 3px rgba(0,55,110,.25)}
.hhome-desc{text-align:center;color:#eefaff;font-size:20px;font-weight:700;text-shadow:0 2px 8px rgba(0,60,120,.25)}
.hhome-tracks{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.hhome-track{position:relative;overflow:hidden;min-height:226px;padding:24px 26px 22px;border-radius:16px;background:rgba(3,38,82,.88);border:1px solid rgba(104,211,255,.52);box-shadow:0 9px 25px rgba(0,42,92,.26)}
.hhome-track.purple{border-color:rgba(91,225,193,.5)}
.hhome-track-head{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:900;color:#fff}.hhome-track.purple .hhome-track-head{color:#fff}
.hhome-track-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:rgba(76,185,255,.19);border:1px solid rgba(126,214,255,.55);color:#55c9ff;font-size:21px}.purple .hhome-track-icon{background:rgba(24,201,156,.13);border-color:rgba(88,236,190,.48);color:#68efbd}
.hhome-medal-icon i{position:relative;display:block;width:16px;height:16px;border:3px solid #68efbd;border-radius:50%}.hhome-medal-icon i:before,.hhome-medal-icon i:after{content:"";position:absolute;top:-10px;width:6px;height:11px;background:#68efbd;border-radius:2px 2px 0 0}.hhome-medal-icon i:before{left:-1px;transform:rotate(-22deg)}.hhome-medal-icon i:after{right:-1px;transform:rotate(22deg)}
.hhome-track ul{list-style:none;padding:9px 0 0;margin:0;line-height:1.92;color:#f3f9ff;font-size:14px}.hhome-track li:before{content:"✓";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:9px;border-radius:50%;background:#a9e9ff;color:#07568b;font-size:10px;font-weight:900}.purple li:before{background:#72efb4;color:#075f48}
.hhome-watermark{position:absolute;right:34px;bottom:20px;width:104px;height:104px;display:grid;place-items:center;font-size:88px;line-height:1;color:#71c9ff;opacity:.13}
.hhome-medal-watermark{right:34px;bottom:20px;width:78px;height:78px;display:block;box-sizing:border-box;border:12px solid #68efbd;border-radius:50%;opacity:.13;transform:scale(.82);transform-origin:center bottom}.hhome-medal-watermark:before,.hhome-medal-watermark:after{content:"";position:absolute;top:-43px;width:25px;height:48px;background:#68efbd;border-radius:6px 6px 0 0}.hhome-medal-watermark:before{left:1px;transform:rotate(-31deg)}.hhome-medal-watermark:after{right:1px;transform:rotate(31deg)}.hhome-medal-watermark i:before{content:"★";position:absolute;inset:0;display:grid;place-items:center;color:#68efbd;font-size:32px;font-style:normal}
.hhome-section{padding:19px 20px}.hhome-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.hhome-head h2{font-size:16px;margin:0}.hhome-refresh,.hhome-linkbtn,.hhome-admin-btn{border:0;background:#edf7ff;color:#087fd8;border-radius:7px;padding:7px 11px;font-weight:700;cursor:pointer}
.hhome-notice{display:flex;justify-content:space-between;gap:14px;padding:12px 4px;border-top:1px solid #edf1f6}.hhome-notice a{color:#273d58;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hhome-notice time{color:#8492a6;font-size:12px;flex:none}
.hhome-ranks{display:grid;grid-template-columns:1fr 1fr;gap:20px}.hhome-rank-list{list-style:none;padding:0;margin:0}.hhome-rank{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:49px;padding:7px 2px;border-top:1px solid #edf1f6}.hhome-rank-name{display:flex;align-items:center;gap:9px;min-width:0}.hhome-rank-user{min-width:0}.hhome-rank-user>a{display:inline-flex;align-items:center;max-width:100%;color:#243b55;font-size:14px;font-weight:800;text-decoration:none;white-space:nowrap}.hhome-rank-user>a:hover{color:#0784c6}.hhome-user-meta{display:flex;align-items:center;gap:5px;min-height:17px;margin-top:3px}.hhome-tier,.hhome-user-title{display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:4px;font-size:10px;font-weight:800;line-height:1;white-space:nowrap}.hhome-tier{border:1px solid #cbd5e1;background:#f1f5f9;color:#64748b}.hhome-tier.bronze{border-color:#e7b78d;background:#fff2e8;color:#a05222}.hhome-tier.gold{border-color:#ebc54e;background:#fff8d6;color:#9a6900}.hhome-tier.platinum{border-color:#88b7ca;background:#ecf8fb;color:#39758d}.hhome-tier.diamond{border-color:#79bdf2;background:#eaf6ff;color:#1973b9}.hhome-tier.star{border-color:#a99af1;background:#f3f0ff;color:#674cc5}.hhome-user-title{max-width:92px;overflow:hidden;border:1px solid #ead79f;background:#fff9e9;color:#8a641a;text-overflow:ellipsis}.hhome-medal{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;background:#edf2f8;font-size:12px;font-weight:900}.hhome-rank:nth-child(1) .hhome-medal{background:#fff1b7;color:#b87900}.hhome-rank:nth-child(2) .hhome-medal{background:#edf1f6;color:#66788d}.hhome-rank:nth-child(3) .hhome-medal{background:#ffe2cc;color:#a85b24}.hhome-score{flex:none;color:#087fd8;font-weight:900;font-size:13px}.hhome-rank-user .training-champion-title{height:18px;min-width:48px;margin-left:5px;padding:0 4px;font-size:10px}.hhome-rank-user .training-champion-title i{font-size:10px}.hhome-rank-user .training-champion-label{font-size:9px}.hhome-rank-user .oj-user-appearance{margin-left:4px}.hhome-rank-user .oj-merchant-title{height:17px;font-size:9px}.hhome-rank-user .oj-merchant-badge{width:17px;height:17px;font-size:9px}
.hhome-acm-title{display:inline-flex;align-items:center;max-width:100px;height:17px;overflow:hidden;padding:0 6px;border:1px solid #409eff;border-radius:4px;color:#fff;font-size:10px;font-weight:800;line-height:1;text-overflow:ellipsis;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.hhome-coin-icon{display:inline-grid;place-items:center;width:25px;height:25px;margin-right:3px;border-radius:50%;background:linear-gradient(145deg,#ffd866,#f3a900);color:#8b5900;font-size:15px;font-weight:900;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 3px 8px rgba(222,155,0,.2);vertical-align:middle}
.hhome-ranks>div:nth-child(2) .hhome-score:before{content:"¥";display:inline-grid;place-items:center;width:17px;height:17px;margin-right:5px;border-radius:50%;background:#ffc83d;color:#8b5900;font-size:10px;font-weight:900}
.hhome-dashboard{padding:26px;background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(240,249,255,.88));border-color:rgba(186,230,253,.8)}.hhome-dashboard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.hhome-clock{font-family:Consolas,monospace;font-size:29px;font-weight:900;letter-spacing:1px;color:#0369a1}.hhome-date-text{color:var(--muted);font-size:13px;font-weight:700;text-align:right}.hhome-quote{margin:0 0 17px;padding:10px 13px;border-left:3px solid #0284c7;background:rgba(255,255,255,.72);border-radius:8px;color:#526276;font-family:serif;font-style:italic}
.hhome-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.hhome-stat{text-align:center;padding:12px 4px;background:#fff;border:1px solid #e0f2fe;border-radius:10px}.hhome-stat strong{display:block;font-family:Consolas,monospace;font-size:23px;color:#0f172a}.hhome-stat:nth-child(1) strong{color:#10ad72}.hhome-stat:nth-child(2) strong{color:#0784c6}.hhome-stat:nth-child(3) strong{color:#8177f2}.hhome-stat small{display:block;margin-top:3px;color:#94a3b8;font-weight:700}
.hhome-countdown{padding:10px 13px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:800}.hhome-countdown-name{color:#0369a1}.hhome-countdown-name:before{content:"⚑";margin-right:7px}.hhome-days{color:#ef4444;background:#fee2e2;padding:2px 9px;border-radius:6px}
.hhome-resources{padding:23px}.hhome-section-symbol{color:#0784c6}.hhome-admin-btn{padding:7px 10px;background:#e8f6fd;color:#0784c6}.hhome-resource-list{display:flex;flex-direction:column;gap:12px}.hhome-resource{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:#fff;color:#203750;text-decoration:none;border:1px solid #e2e8f0;transition:.18s}.hhome-resource:hover{transform:translateY(-2px);border-color:#73c7ed}.hhome-resource.primary{background:linear-gradient(135deg,#0588c9,#0570aa);color:white;border-color:transparent;box-shadow:0 8px 18px rgba(2,132,199,.25)}.hhome-resource-icon{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:10px;background:#eaf7fd;color:#0784c6;font-size:20px;font-weight:900}.hhome-resource.primary .hhome-resource-icon{background:rgba(255,255,255,.2);color:#fff}.hhome-resource-copy{min-width:0;flex:1}.hhome-resource strong{display:block;font-size:16px}.hhome-resource small{display:block;margin-top:3px;opacity:.72}.hhome-resource-arrow{flex:none;color:#8ca1b8;font-size:17px}.hhome-resource.primary .hhome-resource-arrow{color:#fff}
.hhome-contests{padding:22px}.hhome-contest-list{display:flex;flex-direction:column;gap:10px}.hhome-contest-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;text-decoration:none;color:#1e293b;transition:all .2s cubic-bezier(0.4,0,0.2,1);box-shadow:0 1px 3px rgba(15,23,42,.04)}.hhome-contest-item:hover{transform:translateY(-2px);border-color:#38bdf8;box-shadow:0 6px 16px rgba(14,165,233,.12)}.hhome-contest-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}.hhome-contest-title-row{display:flex;align-items:center;gap:6px;min-width:0}.hhome-contest-tag{flex:none;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:4px;line-height:1.3}.hhome-contest-tag.type-oi{background:#fdf2f8;color:#db2777;border:1px solid #fbcfe8}.hhome-contest-tag.type-acm{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.hhome-contest-name{font-size:13.5px;font-weight:800;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hhome-contest-item:hover .hhome-contest-name{color:#0284c7}.hhome-contest-meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:#64748b}.hhome-contest-badge{flex:none;font-size:11px;font-weight:800;padding:3px 8px;border-radius:7px;letter-spacing:.2px}.hhome-contest-badge.status-running{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0;box-shadow:0 0 0 2px rgba(16,185,129,.12)}.hhome-contest-badge.status-scheduled{background:#fffbeb;color:#d97706;border:1px solid #fde68a}.hhome-contest-badge.status-ended{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
.hhome-progress{padding:19px}.hhome-progress-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.hhome-progress-item{padding:15px;border-radius:10px;background:#f6f9fd}.hhome-progress-item strong{display:block;font-size:24px;color:#0a82d7}.hhome-progress-item span{font-size:12px;color:#7b8999}
.hhome-modal-mask{position:fixed;inset:0;z-index:100005;background:rgba(15,31,52,.42);display:grid;place-items:center;padding:18px}.hhome-modal{width:min(780px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:14px;padding:22px;box-shadow:0 25px 80px rgba(0,0,0,.24)}.hhome-modal-header{display:flex;justify-content:space-between;align-items:center}.hhome-modal-header h2{margin:0}.hhome-close{border:0;background:#eef3f8;width:34px;height:34px;border-radius:50%;cursor:pointer}.hhome-form-row{display:grid;grid-template-columns:1.2fr 1.4fr .6fr auto;gap:8px;margin:9px 0}.hhome-form-row input,.hhome-form-row select{min-width:0;padding:9px;border:1px solid #d8e1eb;border-radius:7px}.hhome-form-title{margin:19px 0 8px;font-size:15px}.hhome-add{border:1px dashed #8fc5e8;background:#f5fbff;color:#087fd8;border-radius:7px;padding:8px 12px;cursor:pointer}.hhome-save{float:right;margin-top:18px;border:0;border-radius:8px;background:#087fd8;color:#fff;padding:10px 22px;font-weight:800;cursor:pointer}.hhome-toggle{display:flex;align-items:center;gap:8px;background:#fff8df;border-radius:8px;padding:10px;margin:14px 0}.hhome-empty{padding:24px;text-align:center;color:#8996a7}
@media(max-width:900px){#hcode-homepage-redesign{padding:14px 10px 50px}#header>.el-menu.el-menu--horizontal>.drop-menu{margin-left:0!important;padding-left:0!important}.hhome-shell{grid-template-columns:1fr}.hhome-right{display:grid;grid-template-columns:1fr 1fr}.hhome-dashboard{grid-column:1/-1}.hhome-title{font-size:27px}}
@media(max-width:620px){.hhome-tracks,.hhome-ranks,.hhome-right{grid-template-columns:1fr}.hhome-hero{padding:24px 14px}.hhome-track-head{font-size:18px}.hhome-form-row{grid-template-columns:1fr}.hhome-progress-grid{grid-template-columns:1fr 1fr}}

/* ========================================================
   Training Page Tab Modernization (训练简介 / 题目列表 / 记录榜单)
   ======================================================== */
/* Card Top Tabs Nav (训练三大 Tab 栏外框与按钮) */
.card-top .el-tabs__header {
  border-bottom: none !important;
  margin-bottom: 22px !important;
}

.card-top .el-tabs__nav-wrap::after {
  display: none !important;
}

.card-top .el-tabs__active-bar {
  display: none !important;
}

.card-top .el-tabs__nav {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 18px !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  gap: 10px !important;
}

/* 1. 训练简介 Tab (Cyber Blue / Indigo) */
.card-top #tab-TrainingDetails,
.card-top #tab-GroupTrainingDetails {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 2px solid #93c5fd !important;
  border-radius: 12px !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;
}
.card-top #tab-TrainingDetails:hover,
.card-top #tab-GroupTrainingDetails:hover {
  background: #dbeafe !important;
  border-color: #60a5fa !important;
  color: #1d4ed8 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22) !important;
}
.card-top #tab-TrainingDetails.is-active,
.card-top #tab-GroupTrainingDetails.is-active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 2px solid #1d4ed8 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.4) !important;
}
.card-top #tab-TrainingDetails.is-active i,
.card-top #tab-GroupTrainingDetails.is-active i {
  color: #ffffff !important;
}

/* 2. 题目列表 Tab (Aurora Emerald / Mint) */
.card-top #tab-TrainingProblemList,
.card-top #tab-GroupTrainingProblemList {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 2px solid #6ee7b7 !important;
  border-radius: 12px !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12) !important;
}
.card-top #tab-TrainingProblemList:hover,
.card-top #tab-GroupTrainingProblemList:hover {
  background: #d1fae5 !important;
  border-color: #34d399 !important;
  color: #047857 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.22) !important;
}
.card-top #tab-TrainingProblemList.is-active,
.card-top #tab-GroupTrainingProblemList.is-active {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: 2px solid #047857 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.4) !important;
}
.card-top #tab-TrainingProblemList.is-active i,
.card-top #tab-GroupTrainingProblemList.is-active i {
  color: #ffffff !important;
}

/* 3. 记录榜单 Tab (Royal Amber / Gold Trophy) */
.card-top #tab-TrainingRank,
.card-top #tab-GroupTrainingRank {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 2px solid #fcd34d !important;
  border-radius: 12px !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.12) !important;
}
.card-top #tab-TrainingRank:hover,
.card-top #tab-GroupTrainingRank:hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.22) !important;
}
.card-top #tab-TrainingRank.is-active,
.card-top #tab-GroupTrainingRank.is-active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: 2px solid #d97706 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.4) !important;
}
.card-top #tab-TrainingRank.is-active i,
.card-top #tab-GroupTrainingRank.is-active i {
  color: #ffffff !important;
}

/* ========================================================
   Training Page Header & Progress Modernization
   ======================================================== */
.training-header.el-card {
  position: relative !important;
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  text-align: center !important;
  margin-bottom: 22px !important;
}

.training-header.el-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 33%, #10b981 66%, #f59e0b 100%) !important;
  z-index: 1 !important;
}

.training-header .el-card__header {
  padding: 22px 28px 16px !important;
  border-bottom: 1.5px dashed #cbd5e1 !important;
  background: transparent !important;
}

.training-header .panel-title {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  color: #0f172a !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.training-header .panel-title::before {
  content: "📚" !important;
  font-size: 24px !important;
  -webkit-text-fill-color: initial !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

.training-header .el-card__body {
  padding: 20px 28px 24px !important;
}

/* Progress bar outer container */
.training-header .el-progress {
  max-width: 720px !important;
  margin: 0 auto !important;
}

.training-header .el-progress-bar__outer {
  height: 24px !important;
  border-radius: 16px !important;
  background: #e2e8f0 !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #cbd5e1 !important;
  overflow: hidden !important;
}

/* Progress bar inner fill */
.training-header .el-progress-bar__inner {
  border-radius: 14px !important;
  background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 40%, #10b981 100%) !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.training-header .el-progress-bar__inner::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  animation: ps-progress-shimmer 2.4s infinite !important;
}

@keyframes ps-progress-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.training-header .el-progress-bar__innerText {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  letter-spacing: 0.5px !important;
}

/* AC count & Problem count badge */
.training-header .count {
  margin-top: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 18px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.training-header .count::before {
  content: "🎯 通关进度：" !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748b !important;
}

/* ========================================================
   Rank & 3D Podium Modernization (领奖台与榜单全套美化)
   ======================================================== */
.rank-podium-container {
  margin: 14px 0 22px !important;
  padding: 24px 20px 0 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, #f1f5f9 100%) !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
}

.podium-shell {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 24px !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.podium-card {
  flex: 1 !important;
  max-width: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.podium-card:hover {
  transform: translateY(-4px) !important;
}

.podium-crown {
  font-size: 28px !important;
  margin-bottom: -6px !important;
  filter: drop-shadow(0 2px 6px rgba(234, 179, 8, 0.4)) !important;
  animation: podium-crown-float 2.2s infinite ease-in-out !important;
}

@keyframes podium-crown-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.08); }
}

.podium-avatar-box {
  position: relative !important;
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 8px !important;
}

.podium-gold .podium-avatar-box {
  width: 76px !important;
  height: 76px !important;
}

.podium-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #f1f5f9 !important;
  border: 3px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.podium-gold .podium-avatar {
  border-color: #facc15 !important;
  box-shadow: 0 4px 18px rgba(234, 179, 8, 0.4) !important;
}

.podium-silver .podium-avatar {
  border-color: #94a3b8 !important;
  box-shadow: 0 4px 14px rgba(148, 163, 184, 0.35) !important;
}

.podium-bronze .podium-avatar {
  border-color: #fb923c !important;
  box-shadow: 0 4px 14px rgba(251, 146, 60, 0.35) !important;
}

.podium-avatar.default-av {
  display: grid !important;
  place-items: center !important;
  font-size: 32px !important;
  background: #ffffff !important;
}

.podium-badge {
  position: absolute !important;
  bottom: -4px !important;
  right: -4px !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

.podium-badge.gold {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4) !important;
}

.podium-badge.silver {
  background: linear-gradient(135deg, #94a3b8, #64748b) !important;
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.4) !important;
}

.podium-badge.bronze {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.4) !important;
}

.podium-username {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-bottom: 4px !important;
}

.gold-name {
  font-size: 15px !important;
  color: #0f172a !important;
  font-weight: 900 !important;
}

.podium-score {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  padding: 2px 8px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
}

.gold-score {
  color: #b45309 !important;
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
}

/* Stepped Pillars */
.podium-pillar {
  width: 100% !important;
  border-radius: 14px 14px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.pillar-gold {
  height: 96px !important;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%) !important;
  border: 2px solid #f59e0b !important;
  border-bottom: none !important;
}

.pillar-silver {
  height: 68px !important;
  background: linear-gradient(180deg, #cbd5e1 0%, #64748b 100%) !important;
  border: 2px solid #94a3b8 !important;
  border-bottom: none !important;
}

.pillar-bronze {
  height: 52px !important;
  background: linear-gradient(180deg, #fdba74 0%, #c2410c 100%) !important;
  border: 2px solid #f97316 !important;
  border-bottom: none !important;
}

/* Rank Table Modernization */
.training-rank-search {
  margin: 12px 0 16px !important;
}
.training-rank-search .el-input__inner {
  border-radius: 20px 0 0 20px !important;
  border: 1.5px solid #e2e8f0 !important;
  padding-left: 16px !important;
  height: 38px !important;
}
.training-rank-search .el-input-group__append {
  border-radius: 0 20px 20px 0 !important;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: 1.5px solid #3b82f6 !important;
  color: #fff !important;
}
.training-rank-search .el-input-group__append button {
  color: #fff !important;
}

/* Table styling */
.vxe-table--render-wrapper {
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

.vxe-header--column {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  border-bottom: 2px solid #cbd5e1 !important;
  padding: 10px 0 !important;
}

.vxe-header--column .vxe-cell {
  color: #0f172a !important;
  font-weight: 900 !important;
}

.vxe-body--row:hover {
  background-color: #f0f7ff !important;
}

/* Training List & Problem List Title Links (训练列表与题目名称美化) */
.vxe-cell .el-link.el-link--primary,
.vxe-cell a.title-a,
.vxe-body--column a.el-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%) !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.06) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.vxe-cell .el-link.el-link--primary:hover,
.vxe-cell a.title-a:hover,
.vxe-body--column a.el-link:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: #3b82f6 !important;
  color: #1e40af !important;
  transform: translateX(4px) scale(1.01) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2) !important;
  text-decoration: none !important;
}

.vxe-cell .el-link.el-link--primary .el-link--inner,
.vxe-cell a.title-a {
  text-decoration: none !important;
}

/* Own submission highlight row */
.vxe-body--row.own-submit-row {
  background-color: #eff6ff !important;
  font-weight: 700 !important;
}

/* Table Rank Badges */
.table-rank-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.table-rank-badge.gold {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
}
.table-rank-badge.silver {
  background: linear-gradient(135deg, #94a3b8, #64748b) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.35) !important;
}
.table-rank-badge.bronze {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35) !important;
}
.table-rank-badge.top10 {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

/* Rank Row Highlights */
.vxe-body--row.rank-row-1, tr.rank-row-1 {
  background: linear-gradient(90deg, rgba(254, 243, 199, 0.45) 0%, rgba(255, 255, 255, 0.8) 100%) !important;
}
.vxe-body--row.rank-row-2, tr.rank-row-2 {
  background: linear-gradient(90deg, rgba(241, 245, 249, 0.6) 0%, rgba(255, 255, 255, 0.8) 100%) !important;
}
.vxe-body--row.rank-row-3, tr.rank-row-3 {
  background: linear-gradient(90deg, rgba(255, 237, 213, 0.45) 0%, rgba(255, 255, 255, 0.8) 100%) !important;
}

/* ========================================================
   Training Auth & Category Modernization (训练权限与分类按钮美化)
   ======================================================== */

/* 1. Info Rows Card in Training Introduction */
.card-top .el-col-md-7 .el-card,
.card-top .el-col-sm-24.el-col-md-7 .el-card {
  border-radius: 18px !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}

.info-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.info-rows > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 16px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.info-rows > div:hover {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  transform: translateX(3px) !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.08) !important;
}

.info-rows > div > span:first-child {
  font-weight: 800 !important;
  color: #1e3a8a !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.info-rows > div > span:last-child {
  font-weight: 800 !important;
  color: #0f172a !important;
  font-size: 13.5px !important;
}

/* Training Detail Right Intro Card Header & Title */
.card-top .el-col-md-17 .el-card,
.card-top .el-col-sm-24.el-col-md-17 .el-card {
  border-radius: 18px !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}

.card-top .el-col-md-17 .el-card .el-card__header,
.card-top .el-col-sm-24.el-col-md-17 .el-card .el-card__header {
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%) !important;
  border-bottom: 2px solid #cbd5e1 !important;
  padding: 14px 22px !important;
}

.card-top .el-col-md-17 .panel-title,
.card-top .el-col-sm-24.el-col-md-17 .panel-title {
  font-size: 16.5px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.card-top .el-col-md-17 .panel-title::before,
.card-top .el-col-sm-24.el-col-md-17 .panel-title::before {
  content: "📖";
  font-size: 18px;
}

/* 2. Training Auth Tags (训练权限标签) */
/* Public Training Tag (公开) */
.el-tag--success,
.info-rows .el-tag--success,
.vxe-cell .el-tag--success {
  border-radius: 18px !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  padding: 2px 14px !important;
  height: 28px !important;
  line-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 2px solid #059669 !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
  transition: all 0.2s !important;
}

/* Private Training Tag (私有) */
.el-tag--warning,
.el-tag--danger,
.info-rows .el-tag--warning,
.info-rows .el-tag--danger,
.vxe-cell .el-tag--warning,
.vxe-cell .el-tag--danger {
  border-radius: 18px !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  padding: 2px 14px !important;
  height: 28px !important;
  line-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 2px solid #d97706 !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
  transition: all 0.2s !important;
}

/* 3. Training Category Item Tags (训练分类胶囊 - 尊重后台配置色彩) */
.category-item.el-tag,
.vxe-cell .category-item.el-tag {
  border-radius: 16px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  padding: 2px 14px !important;
  height: 28px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-width: 1.5px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.category-item.el-tag:hover {
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16) !important;
}

/* 4. Training Category / Auth Filters on Training List Page */
.training-category {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #1e3a8a !important;
  margin: 16px 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 6px 14px 14px 6px !important;
  border-top: 1.5px solid #bfdbfe !important;
  border-right: 1.5px solid #bfdbfe !important;
  border-bottom: 1.5px solid #bfdbfe !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
  letter-spacing: 0.3px !important;
}

.training-category::before {
  content: "🏷️";
  font-size: 14px;
}

/* Filter Tag Pills (尊重后台 inline style，只增强圆角与微动效) */
.filter-category .el-tag,
section:has(.training-category) .el-tag {
  margin: 4px 6px 6px 0 !important;
  border-radius: 16px !important;
  padding: 3px 14px !important;
  height: 28px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-width: 1.5px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

.filter-category .el-tag:hover,
section:has(.training-category) .el-tag:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

/* ========================================================
   Contest Modernization (比赛大厅 /contest 与比赛详情页全套美化)
   ======================================================== */

/* 1. 比赛大厅外层容器与卡片 (/contest & ol#contest-list) */
.el-card:has(#contest-list),
#contest-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.el-card:has(#contest-list) {
  border-radius: 20px !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05) !important;
  overflow: hidden !important;
}

.el-card:has(#contest-list) .el-card__header {
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%) !important;
  border-bottom: 2px solid #cbd5e1 !important;
  padding: 18px 24px !important;
}

.el-card:has(#contest-list) .panel-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.el-card:has(#contest-list) .panel-title::before {
  content: "🏆";
  font-size: 22px;
}

/* 比赛大厅筛选行下拉框 (.filter-row .drop-menu) */
.filter-row .drop-menu .el-dropdown-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 20px !important;
  color: #1e293b !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
}

.filter-row .drop-menu .el-dropdown-link:hover {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
}

/* 比赛列表每项卡片 (ol#contest-list > li) */
ol#contest-list > li {
  position: relative !important;
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 18px !important;
  padding: 18px 24px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

ol#contest-list > li:hover {
  transform: translateY(-3px) scale(1.008) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1) !important;
  border-color: #3b82f6 !important;
}

/* 奖杯图标 */
ol#contest-list .trophy {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12)) !important;
  transition: transform 0.3s ease !important;
}

ol#contest-list > li:hover .trophy {
  transform: scale(1.08) rotate(3deg) !important;
}

/* 比赛标题 (p.title a.entry) */
ol#contest-list .contest-main .title {
  margin: 0 0 10px 0 !important;
}

ol#contest-list .contest-main a.entry {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1e3a8a !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

ol#contest-list .contest-main a.entry:hover {
  color: #2563eb !important;
  text-decoration: none !important;
  transform: translateX(4px) !important;
}

/* 比赛元数据信息栏 (ul.detail) */
ol#contest-list .contest-main ul.detail {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px 18px !important;
  font-size: 13.5px !important;
  color: #475569 !important;
  font-weight: 700 !important;
}

ol#contest-list .contest-main ul.detail li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* 赛制按钮 (ACM / OI) */
ol#contest-list .contest-main ul.detail .el-button--mini {
  padding: 4px 14px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* 权限标签 */
ol#contest-list .contest-main ul.detail .el-tag {
  border-radius: 14px !important;
  padding: 2px 12px !important;
  height: 26px !important;
  line-height: 22px !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
}

/* ========================================================
   2. 比赛详情页大顶栏与卡片 (.contest-body Header Card)
   ======================================================== */
.contest-body > .el-row > .el-col > .el-card {
  position: relative !important;
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden !important;
  margin-bottom: 22px !important;
}

.contest-body > .el-row > .el-col > .el-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 33%, #f59e0b 66%, #10b981 100%) !important;
  z-index: 1 !important;
}

/* 比赛详情页大标题 */
.contest-title .panel-title {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}

.contest-title .panel-title::before {
  content: "🏆" !important;
  font-size: 24px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

/* 比赛时间栏 */
.contest-time {
  margin: 16px 0 10px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 14px !important;
  padding: 12px 20px !important;
}

.contest-time p {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #334155 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.contest-time p i {
  color: #2563eb !important;
  font-size: 15px !important;
}

/* 比赛倒计时标签 */
.contest-body .el-tag[style*="background"],
.contest-body .el-row .el-tag {
  border-radius: 20px !important;
  padding: 6px 20px !important;
  height: 36px !important;
  line-height: 24px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  border: 2px solid rgba(0, 0, 0, 0.15) !important;
}

/* 3. 比赛子菜单 Tab 栏导航 (.sub-menu .el-tabs) */
.sub-menu .el-tabs__header {
  border-bottom: none !important;
  margin-bottom: 22px !important;
}

.sub-menu .el-tabs__nav-wrap::after {
  display: none !important;
}

.sub-menu .el-tabs__active-bar {
  display: none !important;
}

.sub-menu .el-tabs__nav {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 18px !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* 比赛各 Tab 基础样式 */
.sub-menu .el-tabs__item {
  border-radius: 12px !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
}

/* 1. 比赛简介 Tab (Cyber Blue / Indigo) */
.sub-menu #tab-ContestDetails,
.sub-menu #tab-GroupContestDetails {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 2px solid #93c5fd !important;
}
.sub-menu #tab-ContestDetails:hover,
.sub-menu #tab-GroupContestDetails:hover {
  background: #dbeafe !important;
  border-color: #60a5fa !important;
  color: #1d4ed8 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-ContestDetails.is-active,
.sub-menu #tab-GroupContestDetails.is-active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 2px solid #1d4ed8 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.4) !important;
}
.sub-menu #tab-ContestDetails.is-active i,
.sub-menu #tab-GroupContestDetails.is-active i {
  color: #ffffff !important;
}

/* 2. 题目列表 Tab (Aurora Emerald / Mint) */
.sub-menu #tab-ContestProblemList,
.sub-menu #tab-GroupContestProblemList {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 2px solid #6ee7b7 !important;
}
.sub-menu #tab-ContestProblemList:hover,
.sub-menu #tab-GroupContestProblemList:hover {
  background: #d1fae5 !important;
  border-color: #34d399 !important;
  color: #047857 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-ContestProblemList.is-active,
.sub-menu #tab-GroupContestProblemList.is-active {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: 2px solid #047857 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.4) !important;
}
.sub-menu #tab-ContestProblemList.is-active i,
.sub-menu #tab-GroupContestProblemList.is-active i {
  color: #ffffff !important;
}

/* 3. 提交状态 Tab (Amethyst Purple) */
.sub-menu #tab-ContestSubmissionList,
.sub-menu #tab-GroupContestSubmissionList {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  border: 2px solid #c4b5fd !important;
}
.sub-menu #tab-ContestSubmissionList:hover,
.sub-menu #tab-GroupContestSubmissionList:hover {
  background: #ede9fe !important;
  border-color: #a78bfa !important;
  color: #6d28d9 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-ContestSubmissionList.is-active,
.sub-menu #tab-GroupContestSubmissionList.is-active {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
  border: 2px solid #6d28d9 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4) !important;
}
.sub-menu #tab-ContestSubmissionList.is-active i,
.sub-menu #tab-GroupContestSubmissionList.is-active i {
  color: #ffffff !important;
}

/* 4. 比赛榜单 Tab (Royal Amber Trophy) */
.sub-menu #tab-ContestRank,
.sub-menu #tab-GroupContestRank {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 2px solid #fcd34d !important;
}
.sub-menu #tab-ContestRank:hover,
.sub-menu #tab-GroupContestRank:hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-ContestRank.is-active,
.sub-menu #tab-GroupContestRank.is-active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: 2px solid #d97706 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.4) !important;
}
.sub-menu #tab-ContestRank.is-active i,
.sub-menu #tab-GroupContestRank.is-active i {
  color: #ffffff !important;
}

/* 5. 比赛公告 Tab (Rose Pink) */
.sub-menu #tab-ContestAnnouncementList,
.sub-menu #tab-GroupContestAnnouncementList {
  background: #fdf2f8 !important;
  color: #db2777 !important;
  border: 2px solid #fbcfe8 !important;
}
.sub-menu #tab-ContestAnnouncementList:hover,
.sub-menu #tab-GroupContestAnnouncementList:hover {
  background: #fce7f3 !important;
  border-color: #f472b6 !important;
  color: #be185d !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-ContestAnnouncementList.is-active,
.sub-menu #tab-GroupContestAnnouncementList.is-active {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
  color: #ffffff !important;
  border: 2px solid #be185d !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(236, 72, 153, 0.4) !important;
}

/* 6. 比赛卡片与描述 (.box-card) */
.contest-body .box-card {
  border-radius: 18px !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  overflow: hidden !important;
}

/* ========================================================
   Group Modernization (团队大厅 /group 与团队详情页全套美化)
   ======================================================== */

/* 1. 团队大厅顶部搜索与筛选栏 (/group) */
.find-group {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1e3a8a !important;
  margin-right: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.find-group::before {
  content: "🔍";
  font-size: 15px;
}

b.group-category {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #1e3a8a !important;
  margin: 16px 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 6px 14px 14px 6px !important;
  border-top: 1.5px solid #bfdbfe !important;
  border-right: 1.5px solid #bfdbfe !important;
  border-bottom: 1.5px solid #bfdbfe !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
}

b.group-category::before {
  content: "🛡️";
  font-size: 14px;
}

/* 团队权限分类胶囊标签 */
.category-item.el-tag {
  border-radius: 16px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 3px 14px !important;
  height: 28px !important;
  line-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-width: 1.5px !important;
  margin: 4px 6px 6px 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.category-item.el-tag:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
}

/* 团队大厅每个团队卡片 */
.el-col:has(> .el-row > .el-col > .el-card) .el-card {
  border-radius: 16px !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

.el-col:has(> .el-row > .el-col > .el-card):hover .el-card {
  transform: translateY(-3px) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12) !important;
}

/* 2. 团队详情主页与专属 Tab 栏 (/group/:groupID) */
/* 1. 团队主页 Tab (Cyber Blue) */
.sub-menu #tab-GroupDetails {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 2px solid #93c5fd !important;
}
.sub-menu #tab-GroupDetails:hover {
  background: #dbeafe !important;
  border-color: #60a5fa !important;
  color: #1d4ed8 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-GroupDetails.is-active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 2px solid #1d4ed8 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.4) !important;
}
.sub-menu #tab-GroupDetails.is-active i {
  color: #ffffff !important;
}

/* 2. 团队题目 Tab (Emerald Mint) */
.sub-menu #tab-GroupProblemList {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 2px solid #6ee7b7 !important;
}
.sub-menu #tab-GroupProblemList:hover {
  background: #d1fae5 !important;
  border-color: #34d399 !important;
  color: #047857 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-GroupProblemList.is-active {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: 2px solid #047857 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.4) !important;
}
.sub-menu #tab-GroupProblemList.is-active i {
  color: #ffffff !important;
}

/* 3. 团队训练 Tab (Teal Cyan) */
.sub-menu #tab-GroupTrainingList {
  background: #f0fdfa !important;
  color: #0d9488 !important;
  border: 2px solid #99f6e4 !important;
}
.sub-menu #tab-GroupTrainingList:hover {
  background: #ccfbf1 !important;
  border-color: #5eead4 !important;
  color: #0f766e !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-GroupTrainingList.is-active {
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%) !important;
  color: #ffffff !important;
  border: 2px solid #0f766e !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(20, 184, 166, 0.4) !important;
}
.sub-menu #tab-GroupTrainingList.is-active i {
  color: #ffffff !important;
}

/* 4. 团队比赛 Tab (Amber Trophy) */
.sub-menu #tab-GroupContestList {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 2px solid #fcd34d !important;
}
.sub-menu #tab-GroupContestList:hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-GroupContestList.is-active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border: 2px solid #d97706 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.4) !important;
}
.sub-menu #tab-GroupContestList.is-active i {
  color: #ffffff !important;
}

/* 5. 提交状态 Tab (Amethyst Purple) */
.sub-menu #tab-GroupSubmissionList {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  border: 2px solid #c4b5fd !important;
}
.sub-menu #tab-GroupSubmissionList:hover {
  background: #ede9fe !important;
  border-color: #a78bfa !important;
  color: #6d28d9 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-GroupSubmissionList.is-active {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
  color: #ffffff !important;
  border: 2px solid #6d28d9 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4) !important;
}
.sub-menu #tab-GroupSubmissionList.is-active i {
  color: #ffffff !important;
}

/* 6. 团队讨论 Tab (Indigo Electric) */
.sub-menu #tab-GroupDiscussionList {
  background: #eef2ff !important;
  color: #4f46e5 !important;
  border: 2px solid #a5b4fc !important;
}
.sub-menu #tab-GroupDiscussionList:hover {
  background: #e0e7ff !important;
  border-color: #818cf8 !important;
  color: #3730a3 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-GroupDiscussionList.is-active {
  background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
  color: #ffffff !important;
  border: 2px solid #4338ca !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.4) !important;
}
.sub-menu #tab-GroupDiscussionList.is-active i {
  color: #ffffff !important;
}

/* 7. 团队成员 Tab (Sky Blue) */
.sub-menu #tab-GroupMemberList {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border: 2px solid #7dd3fc !important;
}
.sub-menu #tab-GroupMemberList:hover {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  color: #0369a1 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-GroupMemberList.is-active {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border: 2px solid #0284c7 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(14, 165, 233, 0.4) !important;
}
.sub-menu #tab-GroupMemberList.is-active i {
  color: #ffffff !important;
}

/* 8. 团队公告 Tab (Rose Pink) */
.sub-menu #tab-GroupAnnouncementList {
  background: #fdf2f8 !important;
  color: #db2777 !important;
  border: 2px solid #fbcfe8 !important;
}
.sub-menu #tab-GroupAnnouncementList:hover {
  background: #fce7f3 !important;
  border-color: #f472b6 !important;
  color: #be185d !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-GroupAnnouncementList.is-active {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
  color: #ffffff !important;
  border: 2px solid #be185d !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(236, 72, 153, 0.4) !important;
}
.sub-menu #tab-GroupAnnouncementList.is-active i {
  color: #ffffff !important;
}

/* 9. 团队排名 Tab (Golden Medal) */
.sub-menu #tab-GroupRank {
  background: #fefce8 !important;
  color: #ca8a04 !important;
  border: 2px solid #fde047 !important;
}
.sub-menu #tab-GroupRank:hover {
  background: #fef9c3 !important;
  border-color: #eab308 !important;
  color: #a16207 !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-GroupRank.is-active {
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%) !important;
  color: #ffffff !important;
  border: 2px solid #ca8a04 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(234, 179, 8, 0.4) !important;
}
.sub-menu #tab-GroupRank.is-active i {
  color: #ffffff !important;
}

/* 10. 团队设置 Tab (Slate Dark) */
.sub-menu #tab-GroupSetting {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 2px solid #cbd5e1 !important;
}
.sub-menu #tab-GroupSetting:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #1e293b !important;
  transform: translateY(-2px) scale(1.02) !important;
}
.sub-menu #tab-GroupSetting.is-active {
  background: linear-gradient(135deg, #475569 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border: 2px solid #1e293b !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(71, 85, 105, 0.4) !important;
}
.sub-menu #tab-GroupSetting.is-active i {
  color: #ffffff !important;
}

/* 3. 团队右侧详情信息卡片 (.el-col-md-6 .el-card) */
.el-col-md-6 .el-card,
.el-col-xs-24.el-col-md-6 .el-card {
  border-radius: 18px !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}

.el-col-md-6 .el-card .el-card__header {
  background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%) !important;
  border-bottom: 2px solid #cbd5e1 !important;
  padding: 20px 0 !important;
}

/* ========================================================
   Problem List & Difficulty Modernization (题目列表与难度按钮美化)
   ======================================================== */

/* 难度筛选标题栏 (b.problem-filter) */
b.problem-filter {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #1e3a8a !important;
  margin: 12px 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 6px 14px 14px 6px !important;
  border-top: 1.5px solid #bfdbfe !important;
  border-right: 1.5px solid #bfdbfe !important;
  border-bottom: 1.5px solid #bfdbfe !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08) !important;
}

b.problem-filter::before {
  content: "🎯";
  font-size: 14px;
}

/* 难度筛选按钮 (.filter-item) */
.problem-filter + div .filter-item.el-tag,
.filter-item.el-tag {
  border-radius: 16px !important;
  padding: 4px 14px !important;
  height: 30px !important;
  line-height: 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 4px 8px 6px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-width: 1.5px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

/* 悬停微浮 */
.problem-filter + div .filter-item.el-tag:hover,
.filter-item.el-tag:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
}

/* 选中激活状态 (el-tag--dark) */
.problem-filter + div .filter-item.el-tag.el-tag--dark,
.filter-item.el-tag.el-tag--dark {
  font-weight: 800 !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

/* 数量角标微胶囊 (.diff-count-badge) */
.diff-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 18px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  background: rgba(15, 23, 42, 0.08) !important;
  color: inherit !important;
  margin-left: 4px !important;
  letter-spacing: 0 !important;
  transition: all 0.2s !important;
}

.el-tag--dark .diff-count-badge {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

/* 严防表格每行难度标签显示数量 (仅允许顶部筛选栏显示) */
.vxe-table .diff-count-badge,
.vxe-cell .diff-count-badge,
table .diff-count-badge,
.el-table .diff-count-badge {
  display: none !important;
}

/* 领奖台严格只显示用户名字，彻底隐藏徽章、榜一、冠亚季军角标、皇冠等额外元素 */
.rank-podium-container .podium-crown,
.rank-podium-container .podium-badge,
.rank-podium-container .training-champion-title,
.rank-podium-container .oj-user-appearance,
.rank-podium-container .oj-merchant-title,
.rank-podium-container .oj-merchant-badge,
.rank-podium-container .ac-count,
.rank-podium-container .score,
.podium-card .podium-crown,
.podium-card .podium-badge,
.podium-card .training-champion-title,
.podium-card .oj-user-appearance,
.podium-card .oj-merchant-title,
.podium-card .oj-merchant-badge,
.podium-shell .training-champion-title,
.podium-username .training-champion-title {
  display: none !important;
}

/* ========================================================
   Rating System (Codeforces-style 比赛等级分系统全套样式)
   ======================================================== */

/* Rated 比赛徽章 */
.rating-contest-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
}
.rating-contest-badge.active {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #b45309 !important;
  border: 1.5px solid #f59e0b !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
}
.rating-contest-badge.settled {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  color: #047857 !important;
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2) !important;
}

/* 管理员结算条 */
.admin-rating-bar {
  background: #ffffff !important;
  border: 2px solid #3b82f6 !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  margin: 12px 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.12) !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.admin-rb-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.admin-rb-icon { font-size: 20px !important; }
.admin-rb-title { font-size: 15px !important; font-weight: 800 !important; color: #1e3a8a !important; }
.admin-rb-status {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
}
.admin-rb-status.rated { background: #fef3c7 !important; color: #b45309 !important; border: 1px solid #fde68a !important; }
.admin-rb-status.settled { background: #dcfce7 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
.admin-rb-status.unrated { background: #f1f5f9 !important; color: #64748b !important; border: 1px solid #e2e8f0 !important; }

/* 通用 Rating 按钮 */
.rating-btn {
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.rating-btn.btn-manage { background: #2563eb !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important; }
.rating-btn.btn-manage:hover { background: #1d4ed8 !important; transform: translateY(-1px) !important; }
.rating-btn.btn-save-cfg { background: #0ea5e9 !important; color: #ffffff !important; }
.rating-btn.btn-calc { background: #f59e0b !important; color: #ffffff !important; }
.rating-btn.btn-settle { background: #10b981 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important; }
.rating-btn.btn-page { background: #f1f5f9 !important; color: #334155 !important; margin: 0 4px !important; }

/* 弹窗遮罩与卡片 */
.rating-modal-mask {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.rating-modal-card {
  background: #ffffff !important;
  width: 90% !important;
  max-width: 960px !important;
  max-height: 88vh !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.rating-modal-card.ladder-modal { max-width: 900px !important; }
.rating-modal-header {
  padding: 16px 22px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%) !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.rating-modal-header h3 { margin: 0 !important; font-size: 17px !important; font-weight: 800 !important; color: #0f172a !important; }
.rating-modal-close { background: none !important; border: none !important; font-size: 22px !important; font-weight: 700 !important; color: #64748b !important; cursor: pointer !important; }
.rating-modal-body { padding: 20px !important; overflow-y: auto !important; flex: 1 !important; }
.rating-form-group { display: flex !important; flex-direction: column !important; gap: 10px !important; font-size: 13.5px !important; }
.rating-checkbox-label { font-weight: 700 !important; color: #1e293b !important; display: flex !important; align-items: center !important; gap: 6px !important; }
.rating-input-row { display: flex !important; align-items: center !important; gap: 8px !important; }
.rating-divider { border: none !important; border-top: 1px solid #e2e8f0 !important; margin: 16px 0 !important; }
.rating-preview-header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; }
.rating-preview-header h4 { margin: 0 !important; font-size: 15px !important; font-weight: 800 !important; color: #334155 !important; }
.rating-preview-actions { display: flex !important; gap: 8px !important; }
.rating-preview-meta { display: flex !important; gap: 16px !important; align-items: center !important; margin-bottom: 12px !important; font-size: 13px !important; color: #475569 !important; }
.status-tag { padding: 2px 8px !important; border-radius: 6px !important; font-weight: 700 !important; font-size: 11.5px !important; }
.status-tag.pending { background: #fef3c7 !important; color: #b45309 !important; }
.status-tag.settled { background: #dcfce7 !important; color: #15803d !important; }

/* 预览表格 */
.rating-table-wrapper { overflow-x: auto !important; max-height: 48vh !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; }
.rating-preview-table, .ladder-table, .rating-history-table { width: 100% !important; border-collapse: collapse !important; font-size: 13px !important; }
.rating-preview-table th, .ladder-table th, .rating-history-table th { background: #f8fafc !important; color: #475569 !important; font-weight: 800 !important; padding: 10px 12px !important; border-bottom: 1.5px solid #e2e8f0 !important; text-align: left !important; }
.rating-preview-table td, .ladder-table td, .rating-history-table td { padding: 9px 12px !important; border-bottom: 1px solid #f1f5f9 !important; color: #1e293b !important; }
.newbie-tag { font-size: 10.5px !important; padding: 1px 5px !important; background: #e0f2fe !important; color: #0284c7 !important; border-radius: 4px !important; font-weight: 700 !important; }
.tier-pill { display: inline-block !important; padding: 1px 7px !important; border-radius: 8px !important; font-size: 11px !important; font-weight: 800 !important; border: 1.5px solid currentColor !important; background: #ffffff !important; }

/* 变动量彩色标 */
.rating-delta { font-weight: 800 !important; font-size: 12.5px !important; padding: 1px 6px !important; border-radius: 6px !important; display: inline-block !important; }
.rating-delta.up { color: #15803d !important; background: #dcfce7 !important; }
.rating-delta.down { color: #b91c1c !important; background: #fee2e2 !important; }
.rating-delta.zero { color: #64748b !important; background: #f1f5f9 !important; }

/* 比赛排行榜注入单元格 */
.rating-rank-cell { display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; font-size: 13px !important; }
.rating-rank-cell .r-old { color: #64748b !important; }
.rating-rank-cell .r-arrow { color: #94a3b8 !important; font-size: 11px !important; }
.rating-rank-cell .r-delta-badge { font-size: 11.5px !important; font-weight: 800 !important; padding: 1px 5px !important; border-radius: 4px !important; }
.rating-rank-cell .r-delta-badge.up { background: #dcfce7 !important; color: #15803d !important; }
.rating-rank-cell .r-delta-badge.down { background: #fee2e2 !important; color: #b91c1c !important; }

/* 用户主页 Rating 仪表盘卡片 */
.user-rating-dashboard {
  background: #ffffff !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 22px !important;
  margin-top: 20px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}
.rating-dash-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 2px solid #f1f5f9 !important;
  padding-bottom: 16px !important;
}
.rating-dash-tier { display: flex !important; align-items: center !important; gap: 14px !important; }
.tier-emblem {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  border: 3px solid !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
.tier-name { font-size: 20px !important; font-weight: 900 !important; letter-spacing: 0.5px !important; }
.tier-subtitle { font-size: 12px !important; color: #64748b !important; font-weight: 600 !important; }
.rating-dash-score-box { text-align: right !important; }
.rating-main-num { font-size: 32px !important; font-weight: 900 !important; color: #0f172a !important; line-height: 1 !important; }
.rating-last-delta { font-size: 13px !important; font-weight: 800 !important; margin-top: 4px !important; }
.rating-last-delta.up { color: #15803d !important; }
.rating-last-delta.down { color: #b91c1c !important; }

/* 属性统计网格 */
.rating-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 12px !important;
  margin: 18px 0 !important;
}
.stat-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.stat-card .lbl { font-size: 11.5px !important; color: #64748b !important; font-weight: 600 !important; }
.stat-card .val { font-size: 16px !important; color: #0f172a !important; font-weight: 800 !important; }

/* 折线图 */
.rating-chart-section { margin-top: 18px !important; }
.rating-chart-title { font-size: 14.5px !important; font-weight: 800 !important; color: #1e293b !important; margin-bottom: 10px !important; }
.rating-svg-container { position: relative !important; width: 100% !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; padding: 10px 0 !important; }
.chart-empty { padding: 40px !important; text-align: center !important; color: #94a3b8 !important; font-size: 13px !important; font-weight: 600 !important; }
.chart-dot { cursor: pointer !important; transition: r 0.2s ease !important; }
.chart-dot:hover { r: 8 !important; }
.chart-tooltip {
  position: absolute !important;
  background: rgba(15, 23, 42, 0.9) !important;
  color: #ffffff !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  pointer-events: none !important;
  z-index: 100 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
.tip-delta.up { color: #4ade80 !important; font-weight: 800 !important; }
.tip-delta.down { color: #f87171 !important; font-weight: 800 !important; }

/* 流水记录表格 */
.rating-history-list-section { margin-top: 22px !important; }

/* 天梯榜列表 */
.ladder-search-bar { display: flex !important; gap: 8px !important; margin-bottom: 14px !important; }
.ladder-search-bar input { flex: 1 !important; padding: 8px 12px !important; border: 1.5px solid #cbd5e1 !important; border-radius: 8px !important; font-size: 13.5px !important; }

/* ========================================================
   Team Research & Tech Tree Modern Styles (团队科技树样式)
   ======================================================== */

.team-research-pane {
  padding: 16px 0 !important;
  animation: fadeIn 0.3s ease !important;
}

.tr-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* 1. Hero Card (顶层战队科技所概览与公账资产) */
.tr-hero-card {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1.5px solid #334155 !important;
  border-radius: 18px !important;
  padding: 24px 28px !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18) !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.tr-hero-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 8px !important;
}

.tr-hero-emblem {
  font-size: 34px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.tr-team-title {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

.tr-level-pill {
  display: inline-block !important;
  margin-top: 4px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 2px 10px !important;
  border-radius: 12px !important;
  background: #f59e0b !important;
  color: #000000 !important;
}

.tr-hero-desc {
  margin: 0 !important;
  font-size: 13px !important;
  color: #94a3b8 !important;
  max-width: 520px !important;
  line-height: 1.5 !important;
}

.tr-hero-assets {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.tr-asset-box {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 130px !important;
}

.tr-asset-box.funds .tr-asset-val { color: #facc15 !important; }
.tr-asset-box.crystals .tr-asset-val { color: #38bdf8 !important; }

.tr-asset-label {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
}

.tr-asset-val {
  font-size: 20px !important;
  font-weight: 900 !important;
}

.tr-asset-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* 2. Topic Mastery Active Banner */
.tr-topic-banner {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border: 1.5px solid #6ee7b7 !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.tr-topic-banner.unset {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-color: #fde68a !important;
}

.tr-topic-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.tr-topic-badge {
  background: #059669 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
}

.tr-topic-badge.warning {
  background: #d97706 !important;
}

.tr-topic-tag {
  font-size: 16px !important;
  color: #065f46 !important;
  font-weight: 900 !important;
}

.tr-topic-hint {
  font-size: 13px !important;
  color: #047857 !important;
  font-weight: 600 !important;
}

/* 3. Category Tabs Filter */
.tr-category-tabs {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.tr-cat-btn {
  padding: 8px 18px !important;
  border-radius: 10px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.tr-cat-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px) !important;
}

.tr-cat-btn.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

/* 4. Tech Nodes Grid */
.tr-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 18px !important;
}

.tr-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

.tr-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
  border-color: #cbd5e1 !important;
}

.tr-card.is-active {
  border-color: #93c5fd !important;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
}

.tr-card.is-max {
  border-color: #fcd34d !important;
  background: linear-gradient(180deg, #fffdfa 0%, #ffffff 100%) !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.08) !important;
}

.tr-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.tr-node-icon {
  font-size: 26px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f5f9 !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
}

.tr-node-meta {
  flex: 1 !important;
  min-width: 0 !important;
}

.tr-node-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.tr-node-name {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.tr-tag {
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

.tr-tag.locked { background: #f1f5f9 !important; color: #64748b !important; }
.tr-tag.active { background: #dbeafe !important; color: #1e40af !important; }
.tr-tag.max { background: #fef3c7 !important; color: #92400e !important; }
.tr-tag.researching { background: #fef3c7 !important; color: #b45309 !important; border: 1px solid #fcd34d !important; animation: pulse 1.5s infinite !important; }

.tr-card.is-researching {
  border-color: #f59e0b !important;
  background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%) !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.12) !important;
}

.tr-hours-progress-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 50%, #eff6ff 100%) !important;
  border: 1.5px solid #6ee7b7 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08) !important;
}

.tr-hours-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #065f46 !important;
}

.tr-hours-head b {
  color: #0284c7 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.tr-hours-bar-bg {
  height: 9px !important;
  background: #e2e8f0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.tr-hours-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #10b981 0%, #06b6d4 50%, #3b82f6 100%) !important;
  border-radius: 6px !important;
  transition: width 0.4s ease !important;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.5) !important;
}

.tr-hours-tip {
  font-size: 11px !important;
  color: #047857 !important;
  line-height: 1.4 !important;
}

.tr-contrib-podium {
  border-top: 1px dashed #cbd5e1 !important;
  padding-top: 6px !important;
  margin-top: 2px !important;
}

.tr-contrib-title {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin-bottom: 4px !important;
}

.tr-contrib-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.tr-contrib-item {
  font-size: 11px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  color: #334155 !important;
}

.tr-contrib-item b {
  color: #0f172a !important;
}

.tr-cost-item.duration {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
  font-weight: 700 !important;
}

.tr-node-cat-sub {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
}

.tr-node-desc {
  margin: 0 !important;
  font-size: 12.5px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}

/* Progress bar */
.tr-progress-bar-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.tr-progress-bar {
  height: 6px !important;
  background: #e2e8f0 !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.tr-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%) !important;
  border-radius: 3px !important;
  transition: width 0.3s ease !important;
}

.tr-card.is-max .tr-progress-fill {
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%) !important;
}

.tr-progress-text {
  font-size: 11px !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
  text-align: right !important;
}

/* Buff & Next Box */
.tr-buff-box {
  background: #f8fafc !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

.tr-buff-title, .tr-next-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  margin-bottom: 3px !important;
}

.tr-buff-text {
  font-size: 12.5px !important;
  color: #64748b !important;
}

.tr-buff-text.active-buff {
  color: #059669 !important;
  font-weight: 800 !important;
}

.tr-next-box {
  background: #fffbeb !important;
  border: 1px solid #fef3c7 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}

.tr-next-text {
  font-size: 12.5px !important;
  color: #92400e !important;
  font-weight: 700 !important;
}

.tr-costs-row {
  display: flex !important;
  gap: 8px !important;
  margin-top: 8px !important;
  flex-wrap: wrap !important;
}

.tr-cost-item {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.tr-cost-item.ok { background: #ecfdf5 !important; color: #065f46 !important; border: 1px solid #a7f3d0 !important; }
.tr-cost-item.lack { background: #fef2f2 !important; color: #991b1b !important; border: 1px solid #fecaca !important; }

/* Buttons */
.tr-card-foot {
  margin-top: auto !important;
  padding-top: 4px !important;
}

.tr-btn {
  padding: 8px 16px !important;
  border-radius: 10px !important;
  border: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.tr-btn-block { width: 100% !important; text-align: center !important; }

.tr-btn-upgrade {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.tr-btn-upgrade:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
}

.tr-btn-disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

.tr-btn-primary { background: #2563eb !important; color: #ffffff !important; }
.tr-btn-ghost { background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; }
.tr-btn-topic { background: #059669 !important; color: #ffffff !important; }

/* Modals */
.tr-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  animation: fadeIn 0.2s ease !important;
}

.tr-modal-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 580px !important;
  max-height: 85vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
}

.tr-modal-card.wide {
  max-width: 760px !important;
}

.tr-modal-header {
  padding: 18px 24px !important;
  border-bottom: 1.5px solid #f1f5f9 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.tr-modal-header h3 {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

.tr-modal-close {
  background: transparent !important;
  border: 0 !important;
  font-size: 24px !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
}

.tr-modal-body {
  padding: 24px !important;
  overflow-y: auto !important;
}

.tr-topics-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 10px !important;
  margin: 16px 0 !important;
}

.tr-topic-pill {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.tr-topic-pill:hover {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  transform: translateY(-2px) !important;
}

.tr-custom-topic-row {
  display: flex !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.tr-input {
  flex: 1 !important;
  padding: 10px 14px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
}

.tr-logs-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}

.tr-logs-table th, .tr-logs-table td {
  padding: 12px 14px !important;
  text-align: left !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.tr-logs-table th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-weight: 800 !important;
}

.tr-logs-table td.funds { color: #d97706 !important; font-weight: 800 !important; }
.tr-logs-table td.crystals { color: #0284c7 !important; font-weight: 800 !important; }
.tr-log-lvl { font-weight: 800 !important; color: #2563eb !important; }
.user-cell { display: flex !important; align-items: center !important; gap: 10px !important; }
.user-avatar { width: 34px !important; height: 34px !important; border-radius: 50% !important; object-fit: cover !important; }
.user-avatar.def { background: #e2e8f0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; }
.user-name-link { color: #0f172a !important; text-decoration: none !important; }
.user-name-link:hover { color: #2563eb !important; text-decoration: underline !important; }
.ladder-pagination { margin-top: 14px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }

/* ========================================================
   HOJ Objective Problem Interactive Suite (Hydro UX)
   ======================================================== */

/* 1. In-Content Option Cards */
.hoj-option-cards-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 10px 0 16px !important;
}

.hoj-option-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  user-select: none !important;
}

.hoj-option-card:hover {
  border-color: #0284c7 !important;
  background: #f0f9ff !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12) !important;
}

.hoj-option-card.selected {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border-color: #16a34a !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.22) !important;
  transform: translateX(4px) !important;
}

.hoj-opt-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  border: 1.5px solid #cbd5e1 !important;
  transition: all 0.18s ease !important;
  flex-shrink: 0 !important;
}

.hoj-option-card:hover .hoj-opt-badge {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

.hoj-option-card.selected .hoj-opt-badge {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
}

.hoj-opt-text {
  font-size: 14.5px !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

.hoj-option-card.selected .hoj-opt-text {
  color: #0f5132 !important;
  font-weight: 700 !important;
}

/* 2. In-Page Inline Choice Bar (for {{ select(n) }}) */
.hoj-inline-choice-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 14px !important;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  margin: 10px 0 !important;
}

.hoj-inline-choice-label {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #0369a1 !important;
}

.hoj-opt-btn {
  width: 40px !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.hoj-opt-btn:hover {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  transform: scale(1.06) !important;
}

.hoj-opt-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.4) !important;
}

/* 3. Floating Answer Sheet (全景答题卡) */
.hoj-answer-matrix-wrapper {
  position: fixed !important;
/* ========================================================
   Hydro OJ Blueprint Native Interactive Objective Problem Styling
   ======================================================== */

/* 1. Problem Description Radio Choice Groups (Blueprint bp6-radio) */
.hydro-choice-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 10px 0 18px !important;
  padding: 0 !important;
}

.bp6-control.bp6-radio.hydro-choice-row {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  padding: 9px 16px !important;
  margin: 2px 0 !important;
  border-radius: 10px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: #1e293b !important;
}

.bp6-control.bp6-radio.hydro-choice-row:hover {
  background: rgba(45, 114, 210, 0.05) !important;
  border-color: #3b82f6 !important;
  transform: translateX(3px) !important;
}

.bp6-control.bp6-radio.hydro-choice-row input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Blueprint Indicator (The authentic Radio circle) */
.bp6-control.bp6-radio.hydro-choice-row .bp6-control-indicator {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1.5px solid #738091 !important;
  background: #ffffff !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.bp6-control.bp6-radio.hydro-choice-row:hover .bp6-control-indicator {
  border-color: #2d72d2 !important;
}

/* Checked state */
.bp6-control.bp6-radio.hydro-choice-row.is-checked,
.bp6-control.bp6-radio.hydro-choice-row.selected {
  background: #f0f7ff !important;
  border-color: #2d72d2 !important;
  box-shadow: 0 0 0 2px rgba(45, 114, 210, 0.18) !important;
  transform: translateX(3px) !important;
}

.bp6-control.bp6-radio.hydro-choice-row.is-checked .bp6-control-indicator,
.bp6-control.bp6-radio.hydro-choice-row.selected .bp6-control-indicator {
  background: #2d72d2 !important;
  border-color: #2d72d2 !important;
}

.bp6-control.bp6-radio.hydro-choice-row.is-checked .bp6-control-indicator:before,
.bp6-control.bp6-radio.hydro-choice-row.selected .bp6-control-indicator:before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
}

.hydro-opt-key {
  color: #0f172a !important;
  margin-right: 6px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
}

.bp6-control.bp6-radio.hydro-choice-row.is-checked .hydro-opt-key {
  color: #106ba3 !important;
}

.hydro-choice-label {
  display: inline-flex !important;
  align-items: baseline !important;
  flex: 1 1 auto !important;
}

.hydro-opt-text {
  font-weight: 500 !important;
}

.bp6-control.bp6-radio.hydro-choice-row.is-checked .hydro-opt-text {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Diagnostic Results on Choices */
.bp6-control.bp6-radio.hydro-choice-row.hydro-ans-correct,
.bp6-control.bp6-radio.hydro-choice-row.hydro-ans-std {
  border-color: #238551 !important;
  background: #e7f4e8 !important;
  box-shadow: 0 0 0 2px rgba(35, 133, 81, 0.2) !important;
}

.bp6-control.bp6-radio.hydro-choice-row.hydro-ans-correct .bp6-control-indicator,
.bp6-control.bp6-radio.hydro-choice-row.hydro-ans-std .bp6-control-indicator {
  border-color: #238551 !important;
  background: #238551 !important;
}

.bp6-control.bp6-radio.hydro-choice-row.hydro-ans-correct .bp6-control-indicator:before,
.bp6-control.bp6-radio.hydro-choice-row.hydro-ans-std .bp6-control-indicator:before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
}

.bp6-control.bp6-radio.hydro-choice-row.hydro-ans-wrong {
  border-color: #cd4246 !important;
  background: #fbeae9 !important;
  box-shadow: 0 0 0 2px rgba(205, 66, 70, 0.2) !important;
}

.bp6-control.bp6-radio.hydro-choice-row.hydro-ans-wrong .bp6-control-indicator {
  border-color: #cd4246 !important;
  background: #cd4246 !important;
}

.bp6-control.bp6-radio.hydro-choice-row.hydro-ans-wrong .bp6-control-indicator:before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
}

/* 2. Hydro Right-Hand Sidebar Panel (#submit-code / .submit-detail) */
#submit-code.hydro-objective-mode-active,
.submit-detail.hydro-objective-mode-active {
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid #d8e1e8 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

#submit-code.hydro-objective-mode-active > .el-card__body {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

#submit-code.hydro-objective-mode-active .CodeMirror,
#submit-code.hydro-objective-mode-active .monaco-editor,
#submit-code.hydro-objective-mode-active .card-top,
#submit-code.hydro-objective-mode-active .card-bottom,
#submit-code.hydro-objective-mode-active .select-row,
#submit-code.hydro-objective-mode-active .hcode-bg-actions {
  display: none !important;
}

.section.side.hydro-sidebar-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 520px !important;
  background: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.hydro-sidebar-header {
  padding: 16px 18px 12px !important;
  background: #f5f8fa !important;
  border-bottom: 1px solid #d8e1e8 !important;
}

.hydro-header-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
}

.hydro-header-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #182026 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hydro-progress-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.bp6-progress-bar {
  height: 6px !important;
  background: #d8e1e8 !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
}

.bp6-progress-meter {
  height: 100% !important;
  background: #2d72d2 !important;
  transition: width 0.2s ease !important;
}

.hydro-progress-text {
  font-size: 11.5px !important;
  color: #5c7080 !important;
  font-weight: 700 !important;
  text-align: right !important;
}

.hydro-sidebar-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 14px 18px !important;
}

.hydro-body-section-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #5c7080 !important;
  margin-bottom: 10px !important;
}

.hydro-nav-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
}

.hydro-nav-chip {
  aspect-ratio: 1 !important;
  border-radius: 6px !important;
  border: 1px solid #d8e1e8 !important;
  background: #f5f8fa !important;
  color: #182026 !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px !important;
  transition: all 0.15s ease !important;
}

.hydro-nav-chip:hover {
  border-color: #2d72d2 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 6px rgba(45, 114, 210, 0.2) !important;
}

.hydro-nav-chip strong {
  font-size: 11px !important;
  color: #5c7080 !important;
}

.hydro-chip-ans {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #182026 !important;
}

.hydro-nav-chip.is-answered {
  background: #f0f7ff !important;
  border-color: #2d72d2 !important;
}

.hydro-nav-chip.is-answered strong { color: #2d72d2 !important; }
.hydro-nav-chip.is-answered .hydro-chip-ans { color: #106ba3 !important; }

.hydro-nav-chip.res-ac {
  background: #e7f4e8 !important;
  border-color: #238551 !important;
}
.hydro-nav-chip.res-ac strong, .hydro-nav-chip.res-ac .hydro-chip-ans { color: #238551 !important; }

.hydro-nav-chip.res-wa {
  background: #fbeae9 !important;
  border-color: #cd4246 !important;
}
.hydro-nav-chip.res-wa strong, .hydro-nav-chip.res-wa .hydro-chip-ans { color: #cd4246 !important; }

.hydro-sidebar-footer {
  padding: 12px 18px 16px !important;
  background: #ffffff !important;
  border-top: 1px solid #d8e1e8 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.bp6-button.bp6-intent-primary.hydro-submit-btn {
  width: 100% !important;
  padding: 10px 18px !important;
  background: #2d72d2 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.2) !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.bp6-button.bp6-intent-primary.hydro-submit-btn:hover {
  background: #1c62be !important;
  transform: translateY(-1px) !important;
}

.hydro-footer-actions {
  display: flex !important;
  gap: 8px !important;
}

.hydro-ghost-btn {
  flex: 1 !important;
  padding: 6px 10px !important;
  border: 1px solid #d8e1e8 !important;
  background: #f5f8fa !important;
  border-radius: 6px !important;
  color: #182026 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: center !important;
}

.hydro-ghost-btn:hover {
  background: #ebf1f5 !important;
}

.hydro-pulse-highlight {
  animation: hydroPulseAnim 1.5s ease !important;
}

@keyframes hydroPulseAnim {
  0% { outline: 3px solid #2d72d2; background-color: #f0f7ff; }
  100% { outline: 3px solid transparent; background-color: transparent; }
}

/* Diagnostic Top Banner */
.hydro-diagnostic-banner {
  margin-bottom: 20px !important;
  padding: 16px 20px !important;
  background: linear-gradient(135deg, #182026 0%, #293742 100%) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  border: 2px solid #2d72d2 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2) !important;
}

.hydro-diag-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.hydro-diag-score-block {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.hydro-diag-score-val {
  font-size: 34px !important;
  font-weight: 900 !important;
  color: #48aff0 !important;
  font-family: Consolas, monospace !important;
}

.hydro-diag-score-max {
  font-size: 15px !important;
  color: #a7b6c2 !important;
  font-weight: 700 !important;
}

.hydro-diag-stats {
  display: flex !important;
  gap: 20px !important;
}

.hydro-diag-stat-item strong {
  display: block !important;
  font-size: 18px !important;
  color: #f5f8fa !important;
}

.hydro-diag-stat-item span {
  font-size: 11px !important;
  color: #a7b6c2 !important;
}

.hydro-diag-close {
  background: transparent !important;
  border: 0 !important;
  color: #a7b6c2 !important;
  font-size: 20px !important;
  cursor: pointer !important;
}

.hoj-yaml-textarea {
  width: 100% !important;
  min-height: 240px !important;
  font-family: Consolas, monospace !important;
  font-size: 13px !important;
  padding: 12px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
}


/* ========================================================
   Rank & Podium Avatar Centering Fix (排名头像完美居中修复)
   ======================================================== */

/* 1. Podium Avatar Box & Images (领奖台头像居中) */
.podium-shell {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 24px !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.podium-card {
  flex: 1 !important;
  max-width: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.podium-avatar-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 8px !important;
}

.podium-gold .podium-avatar-box {
  width: 76px !important;
  height: 76px !important;
}

.podium-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #f1f5f9 !important;
  border: 3px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
  display: block !important;
  margin: 0 auto !important;
}

.podium-avatar.default-av {
  display: grid !important;
  place-items: center !important;
  font-size: 32px !important;
  background: #ffffff !important;
  margin: 0 auto !important;
}

.podium-username {
  text-align: center !important;
  margin: 0 auto 4px !important;
}

/* 2. Rank Podium JS component cards (rank-podium 领奖台卡片) */
.rank-podium-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 16px 12px !important;
  box-sizing: border-box !important;
}

.rank-podium-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 8px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.rank-podium-avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

.rank-1 .rank-podium-avatar {
  width: 62px !important;
  height: 62px !important;
}

/* 3. Table Rows & Cells Avatar Centering (排行榜表格行内头像与用户名垂直居中) */
.vxe-table .vxe-body--column .vxe-cell,
.el-table .el-table__body td .cell {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
}

.vxe-table .vxe-body--column.col--center .vxe-cell,
.vxe-table .vxe-body--column.col--seq .vxe-cell,
.el-table .el-table__body td.is-center .cell {
  justify-content: center !important;
}

/* User avatar elements in tables */
.user-avatar,
.vue-avatar--wrapper,
.vxe-cell .vue-avatar--wrapper,
.contest-rank-user-box .vue-avatar--wrapper,
.vxe-table .user-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin: 0 8px 0 0 !important;
  overflow: hidden !important;
}

.user-avatar img,
.vue-avatar--wrapper img,
.vxe-cell .vue-avatar--wrapper img,
.contest-rank-user-box img,
.vxe-table img.user-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 4. Contest & Training Rank User Box (训练/比赛排名用户栏) */
.contest-rank-user-box {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 40px !important;
  line-height: normal !important;
}

.contest-rank-user-box > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}

.contest-rank-user-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.contest-rank-user-info a {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
}

/* 5. Team Rank Avatars (团队排行榜头像) */
.team-rank-podium-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.team-rank-avatar {
  display: grid !important;
  place-items: center !important;
  width: 88px !important;
  height: 88px !important;
  margin: 17px auto 5px !important;
  overflow: hidden !important;
  border: 5px solid #c4ced6 !important;
  border-radius: 50% !important;
}

.team-rank-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

.team-rank-mini-avatar {
  display: grid !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  overflow: hidden !important;
  border: 2px solid #d4ddd8 !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
}

.team-rank-mini-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 6. Homepage Recent Rank (首页最近7天榜单) */
.hhome-rank {
  display: flex !important;
  align-items: center !important;
}

.hhome-rank-name {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.hhome-rank-user {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}


/* ========================================================
   Rank & Table Rows Avatar & User Box Perfect Centering Fix (全站排行榜头像完美居中)
   ======================================================== */

/* 1. Podium Avatar Box & Images (领奖台头像完美居中) */
.rank-podium-container {
  margin: 14px 0 22px !important;
  padding: 24px 20px 0 !important;
}

.podium-shell {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 24px !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.podium-card {
  flex: 1 !important;
  max-width: 180px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.podium-avatar-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 8px !important;
}

.podium-gold .podium-avatar-box {
  width: 76px !important;
  height: 76px !important;
}

.podium-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #f1f5f9 !important;
  border: 3px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
  display: block !important;
  margin: 0 auto !important;
}

.podium-avatar.default-av {
  display: grid !important;
  place-items: center !important;
  font-size: 32px !important;
  background: #ffffff !important;
  margin: 0 auto !important;
}

.podium-username {
  text-align: center !important;
  margin: 0 auto 4px !important;
}

/* 2. Rank Podium JS component cards (rank-podium 独立组件) */
.rank-podium-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 16px 12px !important;
  box-sizing: border-box !important;
}

.rank-podium-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 8px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.rank-podium-avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

.rank-1 .rank-podium-avatar {
  width: 62px !important;
  height: 62px !important;
}

/* 3. Table Rows & Cells Avatar Centering (排行榜表格每一行内头像垂直与内容居中) */
.vxe-table .vxe-body--row,
.el-table .el-table__row {
  height: auto !important;
  min-height: 52px !important;
}

.vxe-table .vxe-body--column,
.el-table .el-table__body td {
  vertical-align: middle !important;
  padding: 6px 0 !important;
}

.vxe-table .vxe-body--column .vxe-cell,
.el-table .el-table__body td .cell {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  line-height: normal !important;
  overflow: visible !important;
}

.vxe-table .vxe-body--column.col--center .vxe-cell,
.vxe-table .vxe-body--column.col--seq .vxe-cell,
.el-table .el-table__body td.is-center .cell {
  justify-content: center !important;
}

/* User avatar container inside table cells */
.user-avatar,
.vue-avatar--wrapper,
.vxe-cell .vue-avatar--wrapper,
.vxe-cell .user-avatar,
.contest-rank-user-box .vue-avatar--wrapper,
.contest-rank-user-box > span:first-child,
.vxe-body--column .vue-avatar--wrapper,
.vxe-table .user-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
  margin: 0 8px 0 0 !important;
  overflow: hidden !important;
  text-align: center !important;
}

/* Images inside avatar circles */
.user-avatar img,
.vue-avatar--wrapper img,
.vxe-cell .vue-avatar--wrapper img,
.contest-rank-user-box img,
.vxe-table img.user-avatar,
.avatar img,
.el-avatar img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Letters/initials inside avatar circles */
.user-avatar span,
.vue-avatar--wrapper span,
.vxe-cell .vue-avatar--wrapper span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0 auto !important;
}

/* 4. Contest & Training Rank User Box (训练/比赛排名用户栏) */
.contest-rank-user-box {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 44px !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 2px 0 !important;
}

.contest-rank-user-box > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin-right: 0 !important;
}

.contest-rank-user-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.contest-rank-user-info a {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  color: inherit !important;
}

.contest-username {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.3 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.contest-school {
  display: block !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  font-size: 12px !important;
}

/* Rank table username link & tags & appearances */
.vxe-cell > a,
.vxe-cell > span,
.vxe-cell .el-tag,
.vxe-cell .training-champion-title,
.vxe-cell .oj-user-appearance {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* 5. Team Rank Avatars (团队排行榜头像) */
.team-rank-podium-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.team-rank-avatar {
  display: grid !important;
  place-items: center !important;
  width: 88px !important;
  height: 88px !important;
  margin: 17px auto 5px !important;
  overflow: hidden !important;
  border: 5px solid #c4ced6 !important;
  border-radius: 50% !important;
}

.team-rank-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

.team-rank-mini-avatar {
  display: grid !important;
  flex: 0 0 auto !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  overflow: hidden !important;
  border: 2px solid #d4ddd8 !important;
  border-radius: 50% !important;
  margin: 0 auto !important;
}

.team-rank-mini-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 6. Homepage Recent Rank (首页最近7天榜单) */
.hhome-rank {
  display: flex !important;
  align-items: center !important;
}

.hhome-rank-name {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.hhome-rank-user {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}


/* ========================================================
   Avatar & Avatar Frame Complete Centering & Rounding Fix
   ======================================================== */

/* 1. All User Avatar containers in ranking tables & lists */
.user-avatar,
.vue-avatar--wrapper,
.vxe-cell .vue-avatar--wrapper,
.vxe-cell .user-avatar,
.contest-rank-user-box .vue-avatar--wrapper,
.contest-rank-user-box > span:first-child,
.vxe-body--column .vue-avatar--wrapper,
.vxe-table .user-avatar,
.oj-avatar-frame {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 50% !important;
  position: relative !important;
  box-sizing: border-box !important;
  margin: 0 8px 0 0 !important;
  overflow: visible !important;
}

/* 2. All images inside avatar containers MUST be 100% round and perfectly centered */
.user-avatar img,
.vue-avatar--wrapper img,
.vxe-cell .vue-avatar--wrapper img,
.contest-rank-user-box img,
.vxe-table img.user-avatar,
.avatar img,
.el-avatar img,
.oj-avatar-frame img,
.oj-avatar-frame.vue-avatar--wrapper img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* 3. Text/letter initials inside avatar */
.user-avatar span,
.vue-avatar--wrapper span,
.vxe-cell .vue-avatar--wrapper span,
.oj-avatar-frame span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0 auto !important;
  font-weight: 800 !important;
}

/* 4. Avatar Frame (:before ring and :after badge) precise concentric geometry */
.oj-avatar-frame {
  border-radius: 50% !important;
  isolation: isolate !important;
}

.oj-avatar-frame:before,
.oj-avatar-frame[data-oj-avatar-frame-compact="1"]:before {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: -4px !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  background: var(--oj-avatar-frame-gradient) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px)) !important;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.25)) !important;
}

.oj-avatar-frame:after,
.oj-avatar-frame[data-oj-avatar-frame-compact="1"]:after {
  content: var(--oj-avatar-frame-mark) !important;
  position: absolute !important;
  z-index: 4 !important;
  top: -3px !important;
  right: -3px !important;
  display: grid !important;
  place-items: center !important;
  width: 15px !important;
  height: 15px !important;
  box-sizing: border-box !important;
  border: 1.5px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 50% !important;
  background: var(--oj-avatar-frame-mark-bg) !important;
  color: var(--oj-avatar-frame-mark-color) !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.28) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* 5. Header Dropdown Avatar Frame exception */
.drop-menu .oj-avatar-frame,
.oj-header-avatar.oj-avatar-frame {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px !important;
}

.drop-menu .oj-avatar-frame:before,
.oj-header-avatar.oj-avatar-frame:before {
  inset: -3px !important;
}

.drop-menu .oj-avatar-frame:after,
.oj-header-avatar.oj-avatar-frame:after {
  top: -3px !important;
  right: -3px !important;
  width: 13px !important;
  height: 13px !important;
  font-size: 8px !important;
}

/* 6. Table Cell and User Box Flex Alignments */
.vxe-table .vxe-body--row,
.el-table .el-table__row {
  min-height: 52px !important;
}

.vxe-table .vxe-body--column,
.el-table .el-table__body td {
  vertical-align: middle !important;
}

.vxe-table .vxe-body--column .vxe-cell,
.el-table .el-table__body td .cell {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  line-height: normal !important;
  overflow: visible !important;
}

.contest-rank-user-box {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 44px !important;
  gap: 8px !important;
}

.contest-rank-user-box > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  margin-right: 0 !important;
}

.contest-rank-user-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  flex: 1 !important;
  min-width: 0 !important;
}


/* ==========================================================================
   Podium Isolation Guard: Never show podium or pedestals inside modals or admin
   ========================================================================== */
.ps-mask #rank-podium-container,
.ps-modal #rank-podium-container,
.ps-mask .rank-podium,
.ps-modal .rank-podium,
.ps-mask .podium-shell,
.ps-modal .podium-shell,
.ps-mask .podium-pillar,
.ps-modal .podium-pillar,
#admin #rank-podium-container,
#admin .rank-podium,
#admin .podium-shell,
#admin .podium-pillar,
.admin-container #rank-podium-container,
.admin-container .rank-podium,
.admin-container .podium-shell,
.admin-container .podium-pillar,
.admin-main #rank-podium-container,
.admin-main .rank-podium,
.el-dialog #rank-podium-container,
.el-dialog .rank-podium,
.el-dialog__wrapper #rank-podium-container,
.el-dialog__wrapper .rank-podium,
.ivu-modal #rank-podium-container,
.ivu-modal .rank-podium,
.ivu-modal-wrap #rank-podium-container,
.ivu-modal-wrap .rank-podium,
.ps-class-table-wrap #rank-podium-container,
.ps-class-members #rank-podium-container,
.ps-class-table-wrap .rank-podium,
.ps-class-members .rank-podium,
.ps-class-table .table-rank-badge {
  display: none !important;
}

.ps-class-table .rank-row-1,
.ps-class-table .rank-row-2,
.ps-class-table .rank-row-3,
.ps-class-table .rank-podium-row-1,
.ps-class-table .rank-podium-row-2,
.ps-class-table .rank-podium-row-3 {
  background: transparent !important;
}