.bond-widget{background:linear-gradient(135deg,#2c3e50 0%,#34495e 100%);color:#ecf0f1;border-radius:12px;padding:20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;box-shadow:0 5px 20px rgb(0 0 0 / .1);margin-bottom:20px;position:relative;overflow:hidden}.bond-widget::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#3498db,#2980b9,#3498db);background-size:200% 100%;animation:bondGradient 3s ease infinite}@keyframes bondGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.bond-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgb(255 255 255 / .1)}.bond-title{font-size:18px;font-weight:700;margin:0;color:#ecf0f1;text-shadow:0 1px 2px rgb(0 0 0 / .3)}.bond-live-indicator{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.8;background:rgb(52 152 219 / .2);padding:4px 8px;border-radius:10px;border:1px solid rgb(52 152 219 / .3)}.bond-live-dot{width:8px;height:8px;background:#3498db;border-radius:50%;animation:bondPulse 2s infinite;box-shadow:0 0 0 0 rgb(52 152 219 / .7)}@keyframes bondPulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgb(52 152 219 / .7)}70%{transform:scale(1);box-shadow:0 0 0 6px #fff0}100%{transform:scale(.95);box-shadow:0 0 0 0 #fff0}}.bond-indicators{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px;margin-bottom:20px}.bond-indicator{background:rgb(255 255 255 / .05);backdrop-filter:blur(10px);padding:15px 12px;border-radius:8px;text-align:center;border:1px solid rgb(255 255 255 / .1);transition:all 0.3s ease;position:relative;cursor:pointer}.bond-indicator:hover{background:rgb(255 255 255 / .1);transform:translateY(-2px);box-shadow:0 8px 25px rgb(0 0 0 / .15);border-color:rgb(52 152 219 / .5)}.bond-indicator::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#3498db,transparent);opacity:0;transition:opacity 0.3s ease}.bond-indicator:hover::before{opacity:1}.indicator-value{font-size:20px;font-weight:700;color:#3498db;margin-bottom:4px;text-shadow:0 1px 2px rgb(0 0 0 / .2);transition:all 0.3s ease}.bond-indicator:hover .indicator-value{font-size:22px;color:#5dade2}.indicator-label{font-size:11px;color:#bdc3c7;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-weight:600}.indicator-change{font-size:11px;font-weight:600;padding:2px 6px;border-radius:10px;display:inline-block;min-width:40px}.indicator-change.positive{color:#27ae60;background:rgb(39 174 96 / .1);border:1px solid rgb(39 174 96 / .2)}.indicator-change.negative{color:#e74c3c;background:rgb(231 76 60 / .1);border:1px solid rgb(231 76 60 / .2)}.bond-loading{text-align:center;padding:40px 20px}.bond-loading span{display:block;margin-top:12px;font-size:14px;color:#bdc3c7}.bond-spinner{display:inline-block;width:24px;height:24px;border:3px solid rgb(52 152 219 / .3);border-radius:50%;border-top-color:#3498db;animation:spin 1s linear infinite;margin-bottom:8px}@keyframes spin{to{transform:rotate(360deg)}}.bond-error{text-align:center;padding:30px 20px;color:#e74c3c;background:rgb(231 76 60 / .1);border:1px solid rgb(231 76 60 / .2);border-radius:8px;margin:10px 0}.error-message{font-size:14px;line-height:1.5}.retry-btn{background:linear-gradient(45deg,#3498db,#2980b9);color:#fff;border:none;padding:8px 16px;border-radius:20px;cursor:pointer;margin-left:8px;font-size:12px;font-weight:600;transition:all 0.2s ease;box-shadow:0 2px 4px rgb(0 0 0 / .1)}.retry-btn:hover{background:linear-gradient(45deg,#2980b9,#1f618d);transform:translateY(-1px);box-shadow:0 4px 8px rgb(0 0 0 / .15)}.retry-btn:active{transform:translateY(0)}.bond-footer{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#95a5a6;padding-top:12px;border-top:1px solid rgb(255 255 255 / .1);margin-top:5px}.bond-updated{font-weight:500}.bond-source{font-style:italic;opacity:.8}.bond-indicator.updating .indicator-value{animation:bondValueUpdate 0.3s ease}.bond-indicator.significant-change{animation:bondSignificantChange 1s ease}.pulse-animation{animation:bondPulseEffect 0.6s ease}@keyframes bondValueUpdate{0%{transform:scale(1)}50%{transform:scale(1.05);color:#f39c12}100%{transform:scale(1)}}@keyframes bondSignificantChange{0%,100%{transform:scale(1)}25%{transform:scale(1.02)}75%{transform:scale(.98)}}@keyframes bondPulseEffect{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}@media (max-width:768px){.bond-widget{padding:15px;margin-bottom:15px}.bond-indicators{grid-template-columns:repeat(2,1fr);gap:12px}.bond-indicator{padding:12px 8px}.indicator-value{font-size:18px}.bond-indicator:hover .indicator-value{font-size:19px}.bond-title{font-size:16px}.bond-header{flex-direction:column;gap:8px;text-align:center}.bond-footer{flex-direction:column;gap:4px;text-align:center}}@media (max-width:480px){.bond-indicators{grid-template-columns:1fr;gap:10px}.bond-indicator{padding:15px}.indicator-value{font-size:24px}.indicator-label{font-size:12px}}@media (prefers-color-scheme:dark){.bond-widget{box-shadow:0 5px 20px rgb(0 0 0 / .3)}.bond-indicator{background:rgb(255 255 255 / .02)}.bond-indicator:hover{background:rgb(255 255 255 / .08)}}@media (prefers-contrast:high){.bond-widget{border:2px solid #3498db}.indicator-change.positive{background:#27ae60;color:#fff}.indicator-change.negative{background:#e74c3c;color:#fff}}@media print{.bond-widget{background:white!important;color:black!important;box-shadow:none!important;border:1px solid #ccc}.bond-live-dot{display:none}.retry-btn{display:none}.indicator-value{color:black!important}}.bond-widget *{will-change:auto}.bond-indicator:hover{will-change:transform,box-shadow}.bond-spinner{will-change:transform}