*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#333;background-color:#f5f7fa}#root{min-height:100vh}.app{padding:20px;background:#fff;font-family:Arial,sans-serif}.connection-status{display:flex;align-items:center;gap:10px;padding:15px 20px;margin-bottom:20px;border-radius:8px;font-weight:700;font-size:14px}.connection-status.connected{background:#e8f5e8;color:#2e7d32;border:1px solid #4caf50}.connection-status.disconnected{background:#ffebee;color:#c62828;border:1px solid #f44336}.status-dot{width:10px;height:10px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}.connection-status.connected .status-dot{animation:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.last-update{margin-left:auto;font-size:12px;font-weight:400;opacity:.8}.tables-container{display:flex;flex-direction:column;gap:30px;max-width:1400px;margin:0 auto;width:100%;padding:0 10px;box-sizing:border-box}.table-section{border:1px solid #ddd;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 2px 8px #0000001a;width:100%}.table-section h2{color:#d81b60;margin:0;padding:15px;font-size:18px;font-weight:700;border-bottom:1px solid #ddd}.rates-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:auto;min-width:100%}.rates-table th{background:#ffb6c1;color:#333;padding:12px 15px;text-align:left;font-weight:700;border-bottom:1px solid #ddd;white-space:nowrap}.rates-table td{padding:12px 15px;border-bottom:1px solid #eee;background:#fff;white-space:nowrap}.rates-table tbody tr:last-child td{border-bottom:none}@keyframes valueChanged{0%{background-color:#fff3cd;transform:scale(1);box-shadow:0 0 5px #ffc10780}50%{background-color:#ffeaa7;transform:scale(1.05);box-shadow:0 0 15px #ffc107cc}to{background-color:#fff;transform:scale(1);box-shadow:none}}@keyframes rateChanged{0%{background-color:#d4edda;color:#155724;font-weight:700;transform:scale(1);box-shadow:0 0 5px #28a74580}50%{background-color:#c3e6cb;color:#155724;font-weight:700;transform:scale(1.1);box-shadow:0 0 20px #28a745cc}to{background-color:#fff;color:#333;font-weight:400;transform:scale(1);box-shadow:none}}@keyframes changeValueChanged{0%{background-color:#f8d7da;color:#721c24;font-weight:700;transform:scale(1);box-shadow:0 0 5px #dc354580}50%{background-color:#f5c6cb;color:#721c24;font-weight:700;transform:scale(1.1);box-shadow:0 0 20px #dc3545cc}to{background-color:#fff;color:inherit;font-weight:400;transform:scale(1);box-shadow:none}}.rates-table tbody tr:hover{background-color:#f8f9fa;transition:background-color .2s ease}.rates-table td{transition:all .3s ease}.rates-table tbody tr.changed{background-color:#fff3cd;transition:background-color .5s ease}.rates-table tbody tr.changed:hover{background-color:#ffeaa7}.metal-detail-card .value.rate-changed{border-radius:4px;padding:2px 6px}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}.negative{color:#d32f2f;font-weight:700}.positive{color:#2e7d32;font-weight:700}.trend{text-align:center;font-size:16px}.trend-up{display:inline-block;background-color:#4caf50;color:#fff;padding:4px 8px;border-radius:4px;font-weight:700;animation:trendFlash 1s ease-in-out}.trend-down{display:inline-block;background-color:#f44336;color:#fff;padding:4px 8px;border-radius:4px;font-weight:700;animation:trendFlash 1s ease-in-out}.trend-same{display:inline-block;background-color:#fff;color:#333;padding:4px 8px;border-radius:4px;font-weight:700;border:1px solid #ddd}.trend-default{display:inline-block;background-color:#f5f5f5;color:#666;padding:4px 8px;border-radius:4px;font-weight:700}@keyframes trendFlash{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}to{transform:scale(1);opacity:1}}.rates-table td.trend{text-align:center;padding:8px 12px}.rates-table td.trend span{min-width:30px;text-align:center;display:inline-block}.time{font-size:12px;color:#666;text-align:center}.no-data{text-align:center;color:#666;font-style:italic;padding:20px}.calculator-section{background:#fff;border-radius:12px;padding:0;margin:30px auto;box-shadow:0 4px 20px #00000026;max-width:1200px;width:100%;overflow:hidden}.calculator-container{display:grid;grid-template-columns:1fr 1fr;min-height:500px}.calculator-form-left{background:linear-gradient(135deg,#fff7e6,#fff3d4);border:3px solid #ffa726;border-radius:12px 0 0 12px;padding:30px;display:flex;flex-direction:column;gap:25px}.form-label{font-size:18px;font-weight:600;color:#8e3a59;margin-bottom:12px;display:block}.karat-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.karat-btn{padding:12px 8px;border:2px solid #d1c4e9;border-radius:8px;background:#fff;color:#8e3a59;font-weight:600;font-size:16px;cursor:pointer;transition:all .3s ease}.karat-btn:hover{border-color:#8e3a59;background:#f3e5f5}.karat-btn.active{background:#8e3a59;color:#fff;border-color:#8e3a59}.weight-input-container{display:grid;grid-template-columns:1fr auto;border:2px solid #ddd;border-radius:8px;overflow:hidden;background:#fff}.weight-input-new{padding:16px 20px;border:none;outline:none;font-size:18px;font-weight:500;color:#333;text-align:center}.weight-input-new::placeholder{color:#999}.unit-display{background:#f5f5f5;padding:16px 20px;font-weight:600;color:#666;border-left:1px solid #ddd;display:flex;align-items:center;font-size:16px}.making-charges-input{padding:16px 20px;border:2px solid #ddd;border-radius:8px;font-size:18px;font-weight:500;color:#333;text-align:center;background:#fff;outline:none;transition:border-color .3s ease}.making-charges-input:focus{border-color:#8e3a59}.action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:20px}.reset-btn,.calculate-btn{padding:16px 24px;border:none;border-radius:8px;font-size:16px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .3s ease}.reset-btn{background:#8e3a59;color:#fff}.reset-btn:hover{background:#7a2f4f;transform:translateY(-2px)}.calculate-btn{background:#8e3a59;color:#fff}.calculate-btn:hover{background:#7a2f4f;transform:translateY(-2px)}.calculator-result-right{background:linear-gradient(135deg,#8e3a59,#6a2c47);color:#fff;padding:30px;display:flex;flex-direction:column;gap:20px;border-radius:0 12px 12px 0}.result-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.2)}.result-row:last-child{border-bottom:none}.result-row.final-amount{background:#ffc10733;padding:20px 15px;border-radius:8px;margin-top:20px;border:2px solid #ffc107;font-weight:700}.result-label{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#fff;max-width:60%}.result-value{font-size:18px;font-weight:700;text-align:right;color:#ffc107}.final-amount .result-label{color:#fff;font-weight:600}.final-amount .result-value{color:#ffc107;font-size:20px}.calculator-form{display:flex;gap:25px;align-items:flex-start}.calculator-inputs{flex:1;display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:700;color:#333;font-size:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.metal-dropdown,.unit-dropdown,.weight-input{padding:12px 15px;border:2px solid #ddd;border-radius:6px;font-size:14px;background:#fff;transition:all .3s ease;width:100%;box-sizing:border-box}.metal-dropdown:focus,.unit-dropdown:focus,.weight-input:focus{outline:none;border-color:#29b6f6;box-shadow:0 0 0 3px #29b6f626;transform:translateY(-1px)}.metal-dropdown:hover,.unit-dropdown:hover,.weight-input:hover{border-color:#81d4fa}.metal-dropdown option{padding:8px;font-size:14px}.calculation-result{background:linear-gradient(135deg,#f1f8e9,#e8f5e8);border:2px solid #4caf50;border-radius:8px;padding:20px;text-align:center;min-width:220px;flex-shrink:0;box-shadow:0 4px 12px #4caf5026}.result-value{font-size:24px;font-weight:700;color:#2e7d32;margin-bottom:12px;text-shadow:0 1px 2px rgba(46,125,50,.2)}.result-breakdown{color:#666;font-size:12px;line-height:1.4;background:#fffc;padding:8px;border-radius:4px;margin-top:8px}.result-error{color:#d32f2f;font-size:12px;line-height:1.4;font-style:italic;background:#d32f2f1a;padding:8px;border-radius:4px;border-left:3px solid #d32f2f}.result-placeholder{color:#666;font-size:12px;line-height:1.4;font-style:italic;background:#6666661a;padding:8px;border-radius:4px;border-left:3px solid #ccc}@media (hover: none) and (pointer: coarse){.metal-dropdown,.unit-dropdown,.weight-input{min-height:44px;padding:12px 15px;font-size:16px}.calculator-section{margin-bottom:20px}.form-group{gap:10px}.form-group label{font-size:14px;margin-bottom:5px}}.additional-info-section{margin-top:30px;max-width:1200px;margin-left:auto;margin-right:auto}.additional-info-section h2{background:#ffb6c1;color:#333;margin:0 0 20px;padding:15px;font-size:18px;font-weight:700;text-align:center;border-radius:5px;border:1px solid #ddd}.metal-details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.metal-detail-card{background:#fff;border:1px solid #ddd;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a}.metal-detail-card h3{margin:0 0 15px;color:#333;font-size:16px;font-weight:700;text-align:center;padding-bottom:10px;border-bottom:2px solid #ffb6c1}.detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #eee}.detail-row:last-child{border-bottom:none}.detail-row .label{font-weight:600;color:#555;font-size:14px}.detail-row .value{font-weight:500;color:#333;font-size:14px}@media (min-width: 1200px){.tables-container{max-width:1400px;padding:0 20px}.rates-table{font-size:15px}.rates-table th,.rates-table td{padding:14px 18px}.table-section h2{font-size:20px;padding:18px}.table-section:nth-child(2) .rates-table th:nth-child(1),.table-section:nth-child(2) .rates-table td:nth-child(1){width:70%}.table-section:nth-child(2) .rates-table th:nth-child(2),.table-section:nth-child(2) .rates-table td:nth-child(2){width:30%;text-align:right;font-weight:600}}@media (max-width: 1199px) and (min-width: 992px){.tables-container{max-width:1200px;padding:0 15px}.rates-table{font-size:14px}.rates-table th,.rates-table td{padding:12px 15px}.table-section:nth-child(2) .rates-table th:nth-child(1),.table-section:nth-child(2) .rates-table td:nth-child(1){width:70%}.table-section:nth-child(2) .rates-table th:nth-child(2),.table-section:nth-child(2) .rates-table td:nth-child(2){width:30%;text-align:right;font-weight:600}}@media (max-width: 991px) and (min-width: 769px){.tables-container{padding:0 15px;gap:25px}.table-section{overflow:visible}.table-section:nth-child(1){overflow-x:auto;-webkit-overflow-scrolling:touch}.table-section:nth-child(1) .rates-table{min-width:700px}.rates-table{font-size:13px}.rates-table th,.rates-table td{padding:10px 12px}.table-section h2{font-size:17px;padding:14px}.table-section:nth-child(2) .rates-table{width:100%;table-layout:fixed}.table-section:nth-child(2) .rates-table th:nth-child(1),.table-section:nth-child(2) .rates-table td:nth-child(1){width:65%}.table-section:nth-child(2) .rates-table th:nth-child(2),.table-section:nth-child(2) .rates-table td:nth-child(2){width:35%;text-align:right;font-weight:600}}@media (max-width: 768px){.app{padding:10px}.connection-status{flex-direction:column;align-items:flex-start;gap:8px}.last-update{margin-left:0}.tables-container{gap:20px;padding:0 5px}.table-section{border-radius:6px;overflow:visible}.table-section h2{font-size:16px;padding:12px}.rates-table{font-size:12px;width:100%;table-layout:fixed}.rates-table th,.rates-table td{padding:8px 6px;font-size:12px;word-wrap:break-word}.rates-table th:nth-child(2),.rates-table td:nth-child(2),.rates-table th:nth-child(3),.rates-table td:nth-child(3){display:none}.rates-table th:nth-child(1),.rates-table td:nth-child(1){width:35%}.rates-table th:nth-child(4),.rates-table td:nth-child(4){width:15%;text-align:center}.rates-table th:nth-child(5),.rates-table td:nth-child(5){width:30%}.rates-table th:nth-child(6),.rates-table td:nth-child(6){width:20%}.trend{font-size:14px}.time{font-size:11px}.table-section:nth-child(2){margin-top:20px;overflow:visible}.table-section:nth-child(2) .rates-table{width:100%;table-layout:fixed;background:#fff}.table-section:nth-child(2) .rates-table th:nth-child(1),.table-section:nth-child(2) .rates-table td:nth-child(1){width:60%;white-space:normal;word-wrap:break-word;padding:10px 8px}.table-section:nth-child(2) .rates-table th:nth-child(2),.table-section:nth-child(2) .rates-table td:nth-child(2){width:40%;text-align:right;font-weight:600;color:#d81b60;padding:10px 8px}}@media (max-width: 480px){.app{padding:5px}.connection-status{padding:10px 15px;font-size:12px}.tables-container{gap:15px;padding:0}.table-section{margin:0 2px;border-radius:5px;overflow:visible}.table-section h2{font-size:14px;padding:10px}.rates-table{font-size:11px;width:100%;table-layout:fixed}.rates-table th,.rates-table td{padding:6px 4px;font-size:11px;word-wrap:break-word}.rates-table th:nth-child(2),.rates-table td:nth-child(2),.rates-table th:nth-child(3),.rates-table td:nth-child(3){display:none}.rates-table th:nth-child(1),.rates-table td:nth-child(1){width:40%;white-space:normal;word-wrap:break-word}.rates-table th:nth-child(4),.rates-table td:nth-child(4){width:12%;text-align:center}.rates-table th:nth-child(5),.rates-table td:nth-child(5){width:28%;font-weight:600;color:#d81b60}.rates-table th:nth-child(6),.rates-table td:nth-child(6){width:20%;font-weight:600}.table-section:nth-child(2){margin-top:15px;background:#fff;border:1px solid #ddd;border-radius:5px;overflow:visible}.table-section:nth-child(2) .rates-table{width:100%;table-layout:fixed;background:#fff;border-collapse:collapse}.table-section:nth-child(2) .rates-table th{background:#ffb6c1;color:#333;font-weight:700;border-bottom:1px solid #ddd}.table-section:nth-child(2) .rates-table th:nth-child(1),.table-section:nth-child(2) .rates-table td:nth-child(1){width:55%;white-space:normal;word-wrap:break-word;padding:8px 6px;text-align:left}.table-section:nth-child(2) .rates-table th:nth-child(2),.table-section:nth-child(2) .rates-table td:nth-child(2){width:45%;text-align:right;font-weight:600;color:#d81b60;font-size:12px;padding:8px 6px}}@media (max-width: 360px){.app{padding:2px}.tables-container{padding:0}.table-section{margin:0 1px;overflow:visible}.table-section:nth-child(1) .rates-table{min-width:450px;font-size:10px}.rates-table{font-size:10px}.rates-table th,.rates-table td{padding:5px 3px;font-size:10px}.table-section h2{font-size:13px;padding:8px}.table-section:nth-child(1) .rates-table th:nth-child(2),.table-section:nth-child(1) .rates-table td:nth-child(2),.table-section:nth-child(1) .rates-table th:nth-child(3),.table-section:nth-child(1) .rates-table td:nth-child(3){display:none}.table-section:nth-child(1) .rates-table th:nth-child(1),.table-section:nth-child(1) .rates-table td:nth-child(1){width:45%;white-space:normal;word-wrap:break-word}.table-section:nth-child(1) .rates-table th:nth-child(4),.table-section:nth-child(1) .rates-table td:nth-child(4){width:10%}.table-section:nth-child(1) .rates-table th:nth-child(5),.table-section:nth-child(1) .rates-table td:nth-child(5){width:25%}.table-section:nth-child(1) .rates-table th:nth-child(6),.table-section:nth-child(1) .rates-table td:nth-child(6){width:20%}.table-section:nth-child(2){margin-top:10px;background:#fff;border:1px solid #ddd;border-radius:5px;overflow:visible;width:100%}.table-section:nth-child(2) .rates-table{width:100%;table-layout:fixed;background:#fff;border-collapse:collapse}.table-section:nth-child(2) .rates-table th{background:#ffb6c1;color:#333;font-weight:700;border-bottom:1px solid #ddd;font-size:10px;padding:6px 4px}.table-section:nth-child(2) .rates-table th:nth-child(1),.table-section:nth-child(2) .rates-table td:nth-child(1){width:50%;white-space:normal;word-wrap:break-word;font-size:10px;padding:6px 4px;text-align:left}.table-section:nth-child(2) .rates-table th:nth-child(2),.table-section:nth-child(2) .rates-table td:nth-child(2){width:50%;text-align:right;font-weight:600;color:#d81b60;font-size:10px;padding:6px 4px}}.table-section{position:relative}.table-section:after{content:"";position:absolute;top:0;right:0;bottom:0;width:20px;background:linear-gradient(to left,rgba(255,255,255,.8),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease}.table-section:hover:after{opacity:1}.table-section::-webkit-scrollbar{height:8px}.table-section::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.table-section::-webkit-scrollbar-thumb{background:#d81b60;border-radius:10px}.table-section::-webkit-scrollbar-thumb:hover{background:#ad1450}@media (max-width: 1024px){.calculator-section{max-width:95%;margin:20px auto}.calculator-container{grid-template-columns:1fr;min-height:auto}.calculator-form-left{border-radius:12px 12px 0 0;border-bottom:none}.calculator-result-right{border-radius:0 0 12px 12px}.karat-buttons{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.calculator-section{margin:15px 10px;max-width:none}.calculator-form-left,.calculator-result-right{padding:20px}.form-label{font-size:16px}.karat-btn{padding:10px 6px;font-size:14px}.weight-input-new,.making-charges-input{font-size:16px;padding:14px 16px}.unit-display{padding:14px 16px;font-size:14px}.action-buttons{gap:12px}.reset-btn,.calculate-btn{padding:14px 20px;font-size:14px}.result-label{font-size:12px;max-width:55%;color:#fff}.result-value{font-size:16px}.final-amount .result-value{font-size:18px}}@media (max-width: 480px){.calculator-section{margin:10px 5px}.calculator-form-left,.calculator-result-right{padding:15px}.form-label{font-size:14px;margin-bottom:8px}.karat-buttons{grid-template-columns:repeat(2,1fr);gap:8px}.karat-btn{padding:8px 4px;font-size:12px}.weight-input-new,.making-charges-input{font-size:14px;padding:12px 14px}.unit-display{padding:12px 14px;font-size:12px}.action-buttons{gap:10px;margin-top:15px}.reset-btn,.calculate-btn{padding:12px 16px;font-size:12px}.result-row{padding:10px 0}.result-label{font-size:10px;max-width:50%;line-height:1.3;color:#fff}.result-value{font-size:14px}.final-amount{padding:15px 10px}.final-amount .result-label{font-size:11px;color:#fff}.final-amount .result-value{font-size:16px}}@media (max-width: 768px){.metal-details-grid{grid-template-columns:1fr}.metal-detail-card{padding:15px}.detail-row{flex-direction:column;align-items:flex-start;gap:5px}}