/* ===== round 4: readability, polish, modern charts ===== */
html{font-size:16.5px}body{font-family:Inter,"Vazirmatn",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,sans-serif!important;font-size:1rem!important;line-height:1.65!important;letter-spacing:.005em;text-rendering:optimizeLegibility}
body:before,body:after{opacity:.55}
.shell,.lg2{position:relative;z-index:1}
td,th,li,p,dd,dt{font-size:.97rem}th{font-size:.72rem!important;letter-spacing:.14em!important;color:#8fa3c2!important}td{padding:14px 16px!important}
.muted,small{color:#9fb0c9!important}small{font-size:.82rem}
.nav-item{font-size:14.5px!important;padding:11px 13px!important}.nav-sec{font-size:10.5px!important;color:#7487a6!important}
label{font-size:11.5px!important;color:#a8b8d2!important}input,select,textarea{font-size:1rem!important}
.chip{font-size:12px!important;padding:3px 11px!important}.dchip{font-size:11.5px!important}.btn{font-size:14.5px!important;padding:10px 18px!important}.btn.sm{font-size:13px!important;padding:6px 13px!important}
h1{font-size:clamp(30px,4vw,42px)!important;background:linear-gradient(180deg,#fff,#b9cdf2);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none}
h2,.sec-hd{font-size:15px!important;letter-spacing:.02em}
.page-h small{font-size:11px!important}.page-h p{font-size:1.02rem;color:#b3c2da!important}
.card,.stat,.pcard,.glass{transition:transform .2s,border-color .25s,box-shadow .25s}
.card:hover{border-color:rgba(125,211,252,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 22px 50px -26px rgba(56,130,246,.5)}
.content{animation:fadeup .45s ease both}@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card.tw tbody tr{transition:background .15s}.card.tw tbody tr:hover td{background:linear-gradient(90deg,rgba(56,130,246,.12),rgba(255,255,255,.02))}
.side-shell{box-shadow:inset -1px 0 0 rgba(212,175,55,.12),8px 0 44px -24px #000!important}.brand img{filter:drop-shadow(0 0 14px rgba(212,175,55,.45))}
.foot b{text-shadow:0 0 12px rgba(212,175,55,.5)}
/* modern donut */
.dn{position:relative;max-width:260px;margin:4px auto 8px}.dn svg{width:100%;display:block;filter:drop-shadow(0 0 18px rgba(56,130,246,.25))}
.dn .seg{fill:none;stroke-width:20;stroke-linecap:round;animation:dnin 1.1s cubic-bezier(.2,.8,.2,1) both;transition:stroke-width .2s,filter .2s}.dn .seg:hover{stroke-width:25;filter:brightness(1.3)}
@keyframes dnin{from{stroke-dasharray:0 999}}
.dn .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}.dn .mid b{font-size:38px;color:#fff;line-height:1}.dn .mid span{font-size:10px;letter-spacing:.3em;color:#7d8fb0;margin-top:4px}
.lgd{display:grid;gap:8px;margin-top:10px}.lgd div{display:flex;align-items:center;gap:10px;font-size:.95rem}.lgd i{width:10px;height:10px;border-radius:4px;flex:none}.lgd .tr{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}.lgd .tr u{display:block;height:100%;border-radius:9px}.lgd b{min-width:26px;text-align:right}.lgd em{font-style:normal;color:#8394b3;font-size:.82rem;min-width:38px;text-align:right}
/* modern horizontal ranking bars */
.hb{display:grid;gap:13px;margin-top:8px}.hb .r{display:grid;grid-template-columns:62px 1fr 34px;gap:10px;align-items:center}.hb .l{font-weight:800;font-size:.86rem;letter-spacing:.08em}
.hb .t{position:relative;height:14px;border-radius:99px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 3px rgba(0,0,0,.5);overflow:hidden}
.hb .f{height:100%;border-radius:99px;animation:hbin 1s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 0 16px -2px currentColor,inset 0 1px 0 rgba(255,255,255,.4)}.hb .f:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-100%);animation:shine 3.2s infinite}
@keyframes hbin{from{width:0!important}}@keyframes shine{to{transform:translateX(100%)}}.hb .n{text-align:right;font-weight:800;color:#fff}
.stat b{background:linear-gradient(180deg,#fff,#9fc2ff);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.kick{border-color:rgba(251,113,133,.35)!important}
@media(max-width:900px){html{font-size:16px}.hb .r{grid-template-columns:52px 1fr 28px}}