.metro-container{grid-auto-rows:minmax(120px,1fr);gap:12px;width:100%;display:grid}@media (max-width:639px){.metro-container{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(100px,1fr);gap:12px}}@media (min-width:640px) and (max-width:767px){.metro-container{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(110px,1fr);gap:14px}}@media (min-width:768px) and (max-width:1023px){.metro-container{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(120px,1fr);gap:16px}}@media (min-width:1024px) and (max-width:1079px){.metro-container{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(130px,1fr);gap:16px}}@media (min-width:1080px) and (max-width:1600px){.metro-container{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(160px,1fr);gap:24px}}@media (min-width:1600px) and (max-width:1919px){.metro-container{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,1fr);gap:20px}}@media (min-width:1920px){.metro-container{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(160px,1fr);gap:24px}}.metro-tile{cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--tile-from),var(--tile-to));border-radius:16px;flex-direction:column;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.metro-tile:hover{transform:scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.metro-tile:active{transform:scale(.98)}.metro-tile-small,.metro-tile-medium{grid-area:span 1/span 1}.metro-tile-large{grid-area:span 2/span 2}.metro-tile-wide{grid-area:span 1/span 2}.metro-tile-tall{grid-area:span 2/span 1}@media (min-width:1024px) and (max-width:1079px){.metro-tile-medium{grid-area:span 1/span 2}.metro-tile-wide{grid-area:span 1/span 3}}@media (min-width:1080px) and (max-width:1439px){.metro-tile-medium{grid-area:span 1/span 1}.metro-tile-wide{grid-area:span 1/span 2}.metro-tile-large{grid-area:span 2/span 2}}@media (min-width:1440px) and (max-width:1599px){.metro-tile-medium{grid-area:span 1/span 1}.metro-tile-wide{grid-area:span 1/span 2}.metro-tile-large{grid-area:span 2/span 2}}@media (min-width:1600px) and (max-width:1919px){.metro-tile-small,.metro-tile-medium{grid-area:span 1/span 2}.metro-tile-large{grid-area:span 2/span 2}.metro-tile-wide{grid-area:span 1/span 2}}@media (min-width:1920px){.metro-tile-small,.metro-tile-medium{grid-area:span 1/span 1}.metro-tile-large{grid-area:span 2/span 2}.metro-tile-wide{grid-area:span 1/span 2}}.metro-tile-content{z-index:10;flex-direction:column;height:100%;padding:16px;display:flex;position:relative}@media (min-width:768px){.metro-tile-content{padding:20px}}@media (min-width:1024px) and (max-width:1079px){.metro-tile-content{padding:16px}}@media (min-width:1080px) and (max-width:1439px){.metro-tile-content{padding:18px}}@media (min-width:1440px) and (max-width:1599px){.metro-tile-content{padding:20px}}@media (min-width:1600px) and (max-width:1919px){.metro-tile-content{padding:24px}}@media (min-width:1920px){.metro-tile-content{padding:22px}}.metro-tile-header{justify-content:space-between;align-items:flex-start;margin-bottom:auto;display:flex}.metro-tile-icon{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff3;border-radius:12px;justify-content:center;align-items:center;padding:10px;display:inline-flex}.metro-tile-large .metro-tile-icon{padding:12px}.metro-tile-stats{text-align:right}.metro-tile-stats-value{justify-content:flex-end;align-items:center;gap:4px;font-size:1.5rem;font-weight:700;line-height:1;display:flex}@media (min-width:768px){.metro-tile-stats-value{font-size:1.75rem}}@media (min-width:1080px) and (max-width:1439px){.metro-tile-stats-value{font-size:1.5rem}}@media (min-width:1440px) and (max-width:1599px){.metro-tile-stats-value{font-size:1.75rem}}@media (min-width:1600px) and (max-width:1919px){.metro-tile-stats-value{font-size:2rem}}@media (min-width:1920px){.metro-tile-stats-value{font-size:1.875rem}}.metro-tile-stats-label{color:#ffffffb3;margin-top:2px;font-size:.75rem}.metro-tile-footer{margin-top:auto}.metro-tile-title{margin-bottom:2px;font-size:1rem;font-weight:600;line-height:1.2}.metro-tile-large .metro-tile-title{font-size:1.25rem}@media (min-width:768px){.metro-tile-title{font-size:1.125rem}.metro-tile-large .metro-tile-title{font-size:1.5rem}}@media (min-width:1080px) and (max-width:1439px){.metro-tile-title{font-size:1rem}.metro-tile-large .metro-tile-title{font-size:1.375rem}}@media (min-width:1440px) and (max-width:1599px){.metro-tile-title{font-size:1.125rem}.metro-tile-large .metro-tile-title{font-size:1.5rem}}@media (min-width:1600px) and (max-width:1919px){.metro-tile-title{font-size:1.25rem}.metro-tile-large .metro-tile-title{font-size:1.75rem}}@media (min-width:1920px){.metro-tile-title{font-size:1.25rem}.metro-tile-large .metro-tile-title{font-size:1.625rem}}.metro-tile-subtitle{color:#fffc;font-size:.75rem}.metro-tile-large .metro-tile-subtitle{font-size:.875rem}.metro-tile-overlay{opacity:.4;background:linear-gradient(#0000,#0003);position:absolute;inset:0}.metro-tile-pattern{opacity:.1;position:absolute;inset:0}.metro-tile-pattern-dots{background-image:radial-gradient(circle,currentColor 1px,#0000 1px);background-size:20px 20px}.metro-tile-pattern-grid{background-image:linear-gradient(currentColor 1px,#0000 1px),linear-gradient(90deg,currentColor 1px,#0000 1px);background-size:20px 20px}.metro-tile-pattern-lines{background-image:repeating-linear-gradient(45deg,currentColor,currentColor 1px,#0000 1px 15px)}.metro-tile-shine{pointer-events:none;position:absolute;inset:0;overflow:hidden}.metro-tile-shine:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);transition:transform .6s;position:absolute;inset:0;transform:translate(-120%)}.metro-tile:hover .metro-tile-shine:before{transform:translate(120%)}.metro-tile-glow{opacity:0;background:linear-gradient(#0000,#ffffff1a);transition:opacity .3s;position:absolute;inset:0}.metro-tile:hover .metro-tile-glow{opacity:1}.metro-tile-indigo{--tile-from:#6366f1;--tile-to:#4f46e5}.metro-tile-teal{--tile-from:#14b8a6;--tile-to:#0d9488}.metro-tile-slate{--tile-from:#475569;--tile-to:#334155}@keyframes metro-fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.metro-tile-animate{animation:.6s ease-out both metro-fade-in}.metro-trend-up{color:#10b981}.metro-trend-down{color:#ef4444;transform:rotate(180deg)}