@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#f8fafc,#e2e8f0);color:#1e293b;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;overflow-x:hidden;position:relative}body:before{background:repeating-linear-gradient(90deg,hsla(0,0%,100%,.03) 0 1px,transparent 1px 40px),repeating-linear-gradient(0deg,hsla(0,0%,100%,.03) 0 1px,transparent 1px 40px);bottom:0;content:"";left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:0}.container{margin:0 auto;max-width:1200px;padding:40px 20px;position:relative;z-index:1}.header{color:#1e293b;margin-bottom:48px;text-align:center}.header h1{color:#0f172a;font-size:2.5rem;font-weight:700;letter-spacing:-.5px;margin-bottom:16px}.header p{color:#64748b;font-size:1.125rem;font-weight:400;line-height:1.6;margin:0 auto;max-width:500px}.metal-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));margin-bottom:40px}.metal-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;overflow:hidden;padding:32px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.metal-card:before{background:linear-gradient(90deg,#3b82f6,#10b981);content:"";height:4px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.metal-card:hover:before{opacity:1}.metal-card:hover{border-color:#cbd5e1;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-4px)}.metal-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:24px}.metal-symbol{color:#0f172a;font-size:1.5rem;font-weight:700;letter-spacing:-.5px}.metal-name{color:#64748b;font-size:.875rem;font-weight:500;margin-top:4px}.metal-icon{align-items:center;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border:none;border-radius:12px;box-shadow:0 4px 6px -1px #3b82f64d;color:#fff;display:flex;font-size:1.75rem;height:56px;justify-content:center;transition:all .3s ease;width:56px}.metal-card:hover .metal-icon{box-shadow:0 8px 12px -1px #3b82f666;transform:scale(1.05)}.price-section{margin-bottom:24px}.current-price{color:#10b981;font-size:2.25rem;font-weight:700;letter-spacing:-1px;margin-bottom:8px}.metal-details{display:grid;font-size:.875rem;gap:16px;grid-template-columns:1fr 1fr}.detail-item{border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;padding:12px 0;transition:all .2s ease}.detail-item:hover{background:#f8fafc;border-radius:8px;margin:0 -12px;padding:12px}.detail-label{color:#64748b;font-size:.75rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.detail-value{color:#1e293b;font-weight:600}.refresh-btn{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border:none;border-radius:12px;box-shadow:0 4px 6px -1px #3b82f64d;color:#fff;cursor:pointer;display:block;font-family:Inter,sans-serif;font-size:1rem;font-weight:600;margin:32px auto 0;overflow:hidden;padding:16px 32px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.refresh-btn:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.refresh-btn:hover:before{left:100%}.refresh-btn:hover{box-shadow:0 8px 12px -1px #3b82f666;transform:translateY(-2px)}.refresh-btn:active{transform:translateY(0)}.refresh-btn:disabled{background:#94a3b8;box-shadow:none;color:#fff;cursor:not-allowed;transform:none}.last-updated{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;color:#64748b;display:block;font-size:.875rem;font-weight:500;margin:24px auto 0;padding:12px 24px;width:-moz-fit-content;width:fit-content}.last-updated,.loading{background:#fff;border:1px solid #e2e8f0;border-radius:12px;text-align:center}.loading{color:#3b82f6;display:inline-block;font-size:1.125rem;margin:48px 0;padding:24px 32px}.error,.loading{box-shadow:0 4px 6px -1px #0000001a;font-weight:600}.error{background:#fef2f2;border:1px solid #fecaca;border-radius:12px;color:#dc2626;margin:24px 0;padding:20px 32px;text-align:center}@media (max-width:768px){.container{padding:20px 16px}.header h1{font-size:2rem}.metal-grid{grid-template-columns:1fr}.metal-card{padding:24px}.current-price{font-size:1.75rem}}.modern-bg{align-items:center;animation:gradientMove 15s ease infinite;background:linear-gradient(120deg,#667eea,#764ba2,#fbbf24,#059669);background-size:400% 400%;display:flex;justify-content:center;left:0;min-height:100vh;position:fixed;top:0;width:100vw;z-index:-1}@keyframes gradientMove{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.glass{backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);background:#ffffff2e;border:1px solid hsla(0,0%,100%,.3);border-radius:24px;box-shadow:0 8px 32px #1f26872e;margin:40px auto;max-width:700px;padding:40px 32px}