body{margin:0 auto;width:95%;max-width:98%}.sokoni-data{height:100vh;background-color:#fff;font-family:Inter,sans-serif;width:100%;position:calc(var(--position, relative));align-items:center;justify-content:center;box-sizing:border-box;padding-top:0%}@keyframes circleFlow{0%,to{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1) rotate(180deg)}}@keyframes orbitalFade{0%{opacity:0;transform:rotate(0) translate(30px) rotate(0)}to{opacity:1;transform:rotate(360deg) translate(30px) rotate(-360deg)}}.loading-spinner{position:fixed;top:0;left:0;right:0;bottom:0;background:#fffffff2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:1000}.loading-spinner:before,.loading-spinner:after{content:"";position:absolute;width:18px;height:18px;background:#074ca7;border-radius:50%;animation:orbitalFade 2.4s cubic-bezier(.4,0,.2,1) infinite}.loading-spinner:after{animation-delay:-.8s}.loading-spinner:before{animation-delay:-1.6s}.loading-text{margin-top:100px;color:#074ca7;font-weight:600;font-size:1.1rem;text-transform:uppercase;letter-spacing:2px;position:relative;animation:textPulse 2s ease-in-out infinite}@keyframes textPulse{0%,to{opacity:.6;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}@media (min-width: 1200px){.popup-menu-centered{max-width:1200px;margin:2rem auto;padding:2rem;justify-content:center}}.table-container{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow-x:auto}.exchange-table{min-width:800px;width:100%;border-collapse:collapse}@media (max-width: 768px){.table-container{border-radius:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}.exchange-table{min-width:100%}}.popup-menu-centered{display:flex;gap:1rem;padding-top:0rem;padding-bottom:0rem;background:#fff;border-radius:12px;margin-bottom:0rem;flex-wrap:wrap;max-width:100%;justify-content:space-between;align-items:center;position:relative;padding:1rem;box-sizing:border-box;overflow-x:auto;scrollbar-width:thin;width:100%}.popup-btn{display:flex;flex:auto;padding-top:0%;padding:.75rem 1.5rem;background:#fff;color:#1e293b;border:2px solid #e2e8f0;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #0000000d;position:relative;width:15%;align-items:center;justify-content:center}.popup-btn:hover{transform:translateY(-1px);border-color:#074ca7;box-shadow:0 4px 6px -1px #074ca71a}.popup-btn.active{background:linear-gradient(135deg,#074ca7,#063a7a);border-color:#074ca7;color:#fff;transform:translateY(-2px);box-shadow:0 4px 6px -1px #074ca733}.popup-btn i{font-size:1.1rem;transition:color .2s ease}.popup-btn.active i{color:#ffffffe6}.dates-download-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;padding:1rem;border-radius:8px;margin-bottom:2rem}#date-dropdown{padding:.75rem 1.25rem;border:2px solid #cbd5e1;border-radius:6px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23074ca7'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 1rem center/12px;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:.875rem;color:#1e293b;transition:all .2s ease;width:220px}#date-dropdown:hover{border-color:#94a3b8}#date-dropdown:focus{outline:none;border-color:#074ca7;box-shadow:0 0 0 3px #074ca71a}.download-btn{background:linear-gradient(135deg,#074ca7,#063a7a);color:#fff;padding:.75rem 1.5rem;border:none;border-radius:6px;font-weight:600;display:flex;align-items:center;gap:.5rem;transition:all .2s ease}.download-btn:hover{transform:translateY(-1px);box-shadow:0 4px 6px -1px #074ca733}.download-btn:active{transform:translateY(0)}@keyframes fadeInNoData{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.no-data{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Inter,sans-serif;font-size:1.25rem;font-weight:500;color:#334155;background:#fffffff2;padding:1.5rem 2rem;border-radius:10px;box-shadow:0 4px 6px -1px #0000001a;text-align:center;animation:fadeInNoData .5s ease-out forwards;z-index:500;border:1px solid #e2e8f0;display:flex}.no-data:before{content:"";font-family:"Font Awesome 5 Free";font-weight:900;color:#074ca7;display:block;font-size:1.5rem;margin-bottom:.75rem}@keyframes fadeInFromCenter{0%{opacity:0;transform:scale(.95);filter:blur(2px)}to{opacity:1;transform:scale(1);filter:blur(0)}}.table-wrapper{max-height:400px;overflow-y:auto;width:98%;margin:0 auto}.exchange-table{width:100%;border-collapse:collapse}.exchange-table th{background:linear-gradient(135deg,#074ca7,#063a7a);color:#fff;padding:.875rem 1rem;font-size:.875rem;text-align:left;position:sticky;top:0;z-index:1}.exchange-table td{padding:.75rem 1rem;border-bottom:1px solid #f1f5f9;color:#334155;font-size:.875rem}.exchange-table tr{opacity:0;animation:fadeInFromCenter .6s ease-out forwards;animation-delay:calc(.05s * var(--row-index))}.exchange-table tr:hover{background-color:#f8fafc}.table-container p{padding:1rem;font-size:.875rem;color:#64748b;text-align:center;border-top:1px solid #f1f5f9;margin:0;animation:fadeInFromCenter .6s ease-out forwards}@media (max-width: 768px){.sokoni-data{padding:1rem}.popup-menu-centered{gap:.75rem;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#074ca7 transparent;-webkit-overflow-scrolling:touch}.popup-menu-centered::-webkit-scrollbar{height:4px}.popup-menu-centered::-webkit-scrollbar-thumb{background-color:#074ca7;border-radius:4px}.popup-btn{flex:0 0 auto;min-width:160px;padding:.75rem 1.25rem;font-size:.8rem;white-space:nowrap}.dates-download-container{flex-direction:row;gap:.75rem}#date-dropdown,.download-btn{width:100%;font-size:.8rem}}@media (max-width: 480px){.popup-menu-centered{gap:.5rem}.popup-btn{min-width:140px;padding:.6rem 1rem;font-size:.75rem}.popup-btn i{font-size:.9rem}#date-dropdown,.download-btn{padding:.6rem 1rem}}.moving-header{overflow:hidden;white-space:nowrap;background-color:#fff;color:#fff;padding:8px 0;display:flex;align-items:center;box-shadow:0 2px 4px #0000001a;height:50px}.header-info{padding:0 15px;min-width:180px;font-size:16px;font-weight:700;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;border-right:1px solid rgba(255,255,255,.2);background-color:#004a8f;z-index:1000}.header-info .date-info{font-size:12px;font-weight:400;color:#fff;margin-top:2px}.moving-header-content{flex-grow:1;cursor:pointer;transition:background-color .3s ease;height:100%;display:flex;align-items:center}.moving-header-content:hover{background-color:#004a8f0d}.header-content{display:inline-block;animation:slide 180s linear infinite}.header-content.paused{animation-play-state:paused}.header-item{margin:0 15px;font-size:14px;color:#0c40eb;display:inline-flex;align-items:center;background-color:#004a8f0d;padding:5px 10px;border-radius:6px;border:1px solid rgba(0,74,143,.2);box-shadow:0 2px 4px #004a8f1a;transition:all .3s ease}.header-item:hover{border-color:#004a8f;box-shadow:0 4px 8px #004a8f26;transform:translateY(-1px)}.currency-badge{display:inline-block;padding:3px 10px;background-color:#2009f1e5;color:#f2f3fa;border-radius:4px;font-weight:600;margin-right:10px;text-transform:uppercase;font-size:12px;border:1px solid rgba(255,255,255,.3)}.buying{color:#4caf50;margin-left:5px;font-weight:700;padding:3px 8px;border-radius:4px;background-color:#4caf501a;border:1px solid rgba(76,175,80,.3)}.selling{color:#f44336;margin-left:5px;font-weight:700;padding:3px 8px;border-radius:4px;background-color:#f443361a;border:1px solid rgba(244,67,54,.3)}@keyframes slide{0%{transform:translate(0)}to{transform:translate(-50%)}}@media (max-width: 768px){.moving-header{height:40px;flex-direction:column;padding:5px 0}.header-info{width:100%;min-width:auto;padding:0 10px;flex-direction:row;justify-content:space-between;border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}.header-info span{font-size:14px}.header-info .date-info{font-size:11px;margin-top:0}.header-item{margin:0 8px;font-size:12px;padding:3px 6px}.currency-badge{padding:2px 6px;font-size:10px;margin-right:6px}.buying,.selling{padding:2px 5px;font-size:11px}}@media (max-width: 480px){.header-item{margin:0 5px;font-size:11px;padding:2px 4px}.currency-badge{padding:1px 4px;font-size:9px}.buying,.selling{padding:1px 3px;font-size:10px}}
