body{font-family:Segoe UI,Roboto,Oxygen,Ubuntu,Open Sans,sans-serif;margin:0;padding:0;background:linear-gradient(135deg,#f5f7fa,#e4e8f0);color:#333;min-height:100vh}header,footer{text-align:center;max-width:1200px;margin:0 auto;padding:20px 0}header h1{font-size:2.2rem;font-weight:600;color:#2c3e50;margin-bottom:5px}.container{width:100%;max-width:1200px;margin:30px auto;display:flex;flex-direction:row;gap:25px;padding:0 20px}.wallet-section{width:100%;max-width:200px;margin:30px auto;display:flex;flex-direction:column;gap:25px;padding:0 20px}.box{width:50%;border:none;border-radius:12px;padding:25px;background-color:#fff;box-shadow:0 8px 20px #00000014;box-sizing:border-box;transition:transform .2s,box-shadow .2s}.box:hover{transform:translateY(-5px);box-shadow:0 12px 25px #0000001f}.box h2{margin-top:0;color:#2c3e50;border-bottom:2px solid #e7eaf0;padding-bottom:15px;font-size:1.5rem;font-weight:600}.button:hover{background-color:#45a049;box-shadow:0 5px 8px #00000026}.button:active{transform:translateY(2px);box-shadow:0 2px 3px #0000001a}.input-field{width:100%;padding:12px;margin:8px 0;border:1px solid #dde1e7;border-radius:6px;font-size:15px;transition:border .2s,box-shadow .2s;background-color:#f8f9fa}.input-field:focus{border-color:#4caf50;box-shadow:0 0 0 3px #4caf501a;outline:none;background-color:#fff}.form-row{display:flex;gap:15px;margin-bottom:20px}.form-group{flex:1}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#546e7a;font-size:.95rem}.token-row{margin-bottom:20px}.token-row label{display:block;margin-bottom:8px;font-weight:600;color:#546e7a;font-size:.95rem}.button-row{margin-top:25px;display:flex;justify-content:flex-end}.orderbook{display:flex;justify-content:space-between;margin-top:15px;gap:15px}.orderbook-half{width:48%;border-radius:8px;overflow:hidden;box-shadow:0 3px 8px #0000000d}.orderbook-title{text-align:center;font-weight:600;padding:10px;background-color:#f6f8fa;border-radius:8px 8px 0 0;font-size:.9rem;letter-spacing:.5px}.orderbook-bids .orderbook-title{color:#2e7d32;background-color:#2e7d3214}.orderbook-asks .orderbook-title{color:#c62828;background-color:#c6282814}.orderbook-table{width:100%;border-collapse:collapse;font-size:14px;background-color:#fff}.orderbook-table th,.orderbook-table td{padding:10px;text-align:right;border-bottom:1px solid #f0f0f0}.orderbook-table th{background-color:#f9f9f9;font-weight:500;color:#78909c;font-size:.8rem;text-transform:uppercase}.orderbook-bids td:first-child{color:#2e7d32;font-weight:600}.orderbook-asks td:first-child{color:#c62828;font-weight:600}.spread-row{display:flex;justify-content:center;padding:12px;background-color:#f5f7fa;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;font-size:14px;margin:0;font-weight:500;color:#455a64}#spread-value{margin-left:5px;font-weight:700;color:#546e7a}select.input-field{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23546e7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px}footer{margin-top:40px;padding:20px 0;color:#78909c;border-top:1px solid #e7eaf0}@media (max-width: 900px){.container{flex-direction:column;padding:0 15px}.box{width:100%;margin-bottom:20px}.form-row{flex-direction:column;gap:5px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.box{animation:fadeIn .5s ease-out forwards}.box:nth-child(2){animation-delay:.15s}@keyframes highlightRow{0%{background-color:#ffecb3b3}to{background-color:transparent}}.highlight-update{animation:highlightRow 2s ease-out}.orderbook-table tbody tr:hover{background-color:#ecf6fccc;cursor:pointer}@keyframes highlight{0%{background-color:#ffff004d}to{background-color:transparent}}#bids-body tr,#asks-body tr{animation:highlight 1.5s ease-out}.orderbook-table tr:hover{background-color:#e6f0fa80}.button{background-color:#4caf50;color:#fff;padding:12px 20px;border:none;border-radius:6px;cursor:pointer;font-size:16px;font-weight:500;transition:all .2s ease;box-shadow:0 3px 5px #0000001a}.button:hover{background-color:#45a049;transform:translateY(-2px);box-shadow:0 5px 8px #00000026}.button:active{transform:translateY(1px);box-shadow:0 2px 3px #0000001a}.wallet-display{margin-top:15px;padding:10px;background-color:#f7f7f7;border:1px solid #ddd;border-radius:4px;min-height:20px;word-break:break-all;font-family:monospace;display:none}.wallet-display.active{display:block}#balance-amount{font-size:1.2em;font-weight:700;color:#0050b3}.wallet-balance{margin-top:15px;padding:10px;background-color:#e6f7ff;border:1px solid #91d5ff;border-radius:4px;display:flex;align-items:center;justify-content:space-between}.wallet-address,.wallet-mnemonic{margin-bottom:10px}.wallet-label{font-weight:700;margin-bottom:3px}#generate-wallet{background-color:#28a745;color:#fff}#generate-wallet:hover{background-color:#218838}
