*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;margin:0}body{font-family:system-ui,Arial,sans-serif;background:#000;color:#fff;padding:0;margin:0;--card-min-height: 140px;}.container{width:100%;max-width:none;padding:12px;margin:0;height:100%;}header{margin-bottom:15px;padding:0 12px}h1{margin:0;font-size:24px;font-weight:700;color:#4CAF50;letter-spacing:0.5px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;width:100%;height:100%;}.card{position:relative;overflow:hidden;background:#111;border:1px solid #333;border-radius:8px;padding:16px;min-height:var(--card-min-height);box-shadow:0 2px 10px rgba(0,0,0,0.3);transition:all 0.3s ease;}.label{font-weight:600;color:#888;margin-bottom:4px;font-size:14px}.value{font-size:32px;font-weight:700;color:#4CAF50;text-shadow:0 1px 2px rgba(0,0,0,0.5)}.value .sub{font-size:14px;font-weight:500;color:#aaa}.hint{opacity:0.7;color:#888;font-size:12px;margin-top:2px}.mini{position:absolute;inset:0;width:100%;height:100%;opacity:0.4;z-index:0}.card>*:not(.mini){position:relative;z-index:1}@media (max-width: 768px){.grid{grid-template-columns:1fr 1fr}}@media (max-width: 480px){.grid{grid-template-columns:1fr}}@media (max-aspect-ratio: 1/1) {  .grid{grid-template-columns:1fr;grid-auto-rows:1fr;height:calc(100% - 60px);}  .card{min-height:auto;height:100%;}  .value{font-size:min(6vw, 48px);}  .label{font-size:min(4vw, 16px);}}@media (min-aspect-ratio: 1/1) and (max-height: 600px) {  .grid{grid-auto-rows:1fr;}  .card{min-height:auto;height:100%;}}