*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh}.app{min-height:100vh;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);padding:0}.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-radius:0 0 20px 20px;margin-bottom:2rem;box-shadow:0 4px 20px #0000001a}.logo-section{display:flex;align-items:center;gap:1rem}.logo{height:50px;width:auto}.title-section h1{font-size:2rem;font-weight:700;margin:0}.subtitle{font-size:.9rem;color:#666;margin:.25rem 0 0}.status-indicator{display:flex;align-items:center;gap:2rem}.network-status{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.status-dot{width:8px;height:8px;border-radius:50%;background:#4caf50;animation:pulse 2s infinite}.status-dot.active{background:#4caf50}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.notification-container{position:fixed;top:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.notification-container>*{pointer-events:auto}.notification{max-width:400px;padding:1rem 1.5rem;border-radius:8px;font-weight:500;animation:slideInRight .3s ease-out;box-shadow:0 4px 20px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;min-height:60px;position:relative}.notification-content{flex:1;word-wrap:break-word;padding-right:30px}.notification-close{position:absolute;top:8px;right:8px;background:none;border:none;color:inherit;font-size:1.5rem;font-weight:700;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease;flex-shrink:0;z-index:1001}.notification-close:hover{background:rgba(255,255,255,.2)}.notification.success{background:rgba(76,175,80,.95);border:1px solid rgba(76,175,80,.3);color:#fff}.notification.error{background:rgba(244,67,54,.95);border:1px solid rgba(244,67,54,.3);color:#fff}.notification.info{background:rgba(33,150,243,.95);border:1px solid rgba(33,150,243,.3);color:#fff}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.tab-navigation{display:flex;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.2);padding:0 2rem;gap:.5rem}.tab{padding:1rem 1.5rem;background:none;border:none;cursor:pointer;font-size:.9rem;font-weight:500;color:#666;border-bottom:3px solid transparent;transition:all .3s ease;position:relative}.tab:hover{background:rgba(102,126,234,.05);color:#667eea}.tab.active{color:#667eea;border-bottom-color:#667eea;background:rgba(102,126,234,.05)}.tab-content{padding:2rem;max-width:1400px;margin:0 auto}.section-header{text-align:center;margin-bottom:2rem}.section-header h2{font-size:2rem;font-weight:700;color:#333;margin-bottom:.5rem}.section-header p{font-size:1rem;color:#666}.content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:2rem;align-items:start}.card{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:1.5rem;box-shadow:0 4px 20px #0000001a;border:1px solid rgba(255,255,255,.2);transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;min-height:500px}.card:hover{transform:translateY(-2px);box-shadow:0 6px 30px #00000026}.card h3{font-size:1.25rem;font-weight:600;color:#333;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;flex-shrink:0}.form-group{margin-bottom:1rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}input,textarea,select{width:100%;padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:.9rem;transition:border-color .3s ease,box-shadow .3s ease;background:rgba(255,255,255,.8)}input:focus,textarea:focus,select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}textarea{resize:vertical;min-height:80px}button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}.primary-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;box-shadow:0 2px 10px #667eea4d}.primary-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 20px #667eea66}.secondary-btn{background:rgba(102,126,234,.1);color:#667eea;border:2px solid #667eea}.secondary-btn:hover:not(:disabled){background:#667eea;color:#fff}.strategy-btn{background:linear-gradient(135deg,#ff9a56 0%,#ffad56 100%);color:#fff;box-shadow:0 2px 10px #ff9a564d}.strategy-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 20px #ff9a5666}.test-btn{background:linear-gradient(135deg,#4caf50 0%,#66bb6a 100%);color:#fff;box-shadow:0 2px 10px #4caf504d;width:100%}.test-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 20px #4caf5066}button:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.input-group{display:flex;gap:.5rem;align-items:stretch}.input-group input{flex:1}.input-group button{white-space:nowrap}.help-text{font-size:.8rem;color:#666;margin-top:.5rem;font-style:italic}.vault-list,.token-list{display:flex;flex-direction:column;gap:1rem;flex:1;overflow-y:auto;min-height:0;max-height:none}.vault-item,.token-item{padding:1rem;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .3s ease;background:rgba(255,255,255,.5)}.vault-item:hover,.token-item:hover{border-color:#667eea;background:rgba(102,126,234,.05)}.vault-item.selected,.token-item.selected{border-color:#667eea;background:rgba(102,126,234,.1);box-shadow:0 2px 10px #667eea33}.vault-header,.token-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.vault-strategy,.token-decimals{background:rgba(102,126,234,.1);color:#667eea;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:500}.vault-stats,.token-stats{display:flex;gap:1rem;font-size:.85rem;color:#666;margin-bottom:.5rem}.vault-token-info{display:flex;gap:1rem;font-size:.8rem;color:#888;margin-bottom:.5rem;padding:.25rem .5rem;background:rgba(102,126,234,.05);border-radius:4px}.vault-id,.token-id{font-size:.75rem;color:#999;font-family:monospace;word-break:break-all}.user-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;padding:1rem;background:rgba(102,126,234,.05);border-radius:8px}.stat{display:flex;flex-direction:column;gap:.25rem}.stat label{font-size:.8rem;color:#666;font-weight:500}.stat span{font-size:1.1rem;font-weight:600;color:#333}.operation-group{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #e0e0e0}.operation-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.operation-group h4{font-size:1rem;font-weight:600;color:#333;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.metadata-content{display:flex;flex-direction:column;gap:1rem}.metric{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:rgba(102,126,234,.05);border-radius:6px}.metric label{font-weight:500;color:#555}.metric span{font-weight:600;color:#333}.empty-state{text-align:center;color:#666;font-style:italic;padding:2rem}.empty-state-large{text-align:center;padding:4rem 2rem;color:#666}.empty-state-large h3{color:#666;margin-bottom:.5rem}.loading-state{display:flex;align-items:center;justify-content:center;padding:2rem;color:#666}.loading-state p{margin:0;font-size:1.1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.transaction-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:.5rem 0}.transaction-count{font-size:.9rem;color:#666;font-weight:500}.transaction-list{max-height:400px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:8px;background:#fafafa}.transaction-item{padding:1rem;border-bottom:1px solid #e0e0e0;background:white;transition:background-color .2s ease}.transaction-item:last-child{border-bottom:none}.transaction-item:hover{background:#f8f9fa}.transaction-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.transaction-type{font-weight:600;color:#2c3e50;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.transaction-time{font-size:.8rem;color:#666}.transaction-details p{margin:.5rem 0;color:#333;font-size:.9rem;line-height:1.4}.transaction-links{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #f0f0f0}.transaction-link{color:#007bff;text-decoration:none;font-size:.85rem;font-weight:500;transition:color .2s ease}.transaction-link:hover{color:#0056b3;text-decoration:underline}.transaction-hash{font-family:Courier New,monospace;font-size:.8rem;color:#666;background:#f8f9fa;padding:.2rem .4rem;border-radius:4px}.test-coverage{display:flex;flex-direction:column;gap:1.5rem}.test-category h4{margin-bottom:.75rem;color:#333;font-weight:600}.test-category ul{list-style:none;padding:0}.test-category li{color:#666;position:relative;padding:.5rem 0 .5rem 1.5rem}.test-category li:before{content:"✓";position:absolute;left:0;color:#4caf50;font-weight:700}.connection-status{display:flex;flex-direction:column;gap:1rem}.status-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:rgba(255,255,255,.5);border-radius:6px}.status-label{font-weight:500;color:#555}.status-value{font-weight:600}.status-value.connected{color:#4caf50}.status-value.disconnected{color:#f44336}@media (max-width: 768px){.header{flex-direction:column;gap:1rem;padding:1rem}.tab-navigation{flex-wrap:wrap}.tab{flex:1;min-width:120px}.tab-content{padding:1rem}.content-grid{grid-template-columns:1fr;gap:1rem}.form-row,.user-stats{grid-template-columns:1fr}.input-group{flex-direction:column}.vault-header,.token-header{flex-direction:column;align-items:flex-start;gap:.5rem}.vault-stats,.token-stats{flex-direction:column;gap:.5rem}.metric{flex-direction:column;align-items:flex-start;gap:.25rem}.card{min-height:400px}.vault-list,.token-list{max-height:300px}}.auth-status{display:flex;align-items:center;gap:1rem}.login-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .3s ease;font-weight:500}.login-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.login-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.user-info{display:flex;align-items:center;gap:1rem}.user-principal{background:rgba(255,255,255,.1);padding:.5rem 1rem;border-radius:8px;font-family:Courier New,monospace;font-size:.9rem;color:#e0e0e0;border:1px solid rgba(255,255,255,.2)}.logout-btn{background:linear-gradient(135deg,#ff6b6b 0%,#ee5a24 100%);color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .3s ease;font-weight:500}.logout-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b66}.user-info-display{background:rgba(102,126,234,.1);border:1px solid rgba(102,126,234,.3);border-radius:8px;padding:1rem;margin-bottom:1rem}.user-info-display p{margin:.5rem 0;font-size:.9rem}.user-info-display strong{color:#667eea}.user-info-display em{color:#888;font-style:italic}.auth-notice{background:rgba(255,193,7,.1);border:1px solid rgba(255,193,7,.3);border-radius:8px;padding:.75rem;margin-top:1rem;text-align:center;color:#ffc107;font-weight:500}.token-selection{margin-bottom:1rem}.token-select{width:100%;padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:.9rem;background:rgba(255,255,255,.8);transition:border-color .3s ease}.token-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.selected-token-info{margin-top:1rem;padding:1rem;background:rgba(102,126,234,.05);border:1px solid rgba(102,126,234,.2);border-radius:8px}.selected-token-info h4{margin:0 0 .75rem;color:#667eea;font-size:1.1rem}.token-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem}.token-details p{margin:.25rem 0;font-size:.9rem}.token-details strong{color:#555}.user-balance-info{margin-bottom:1rem}.user-balance-info p{margin-bottom:1rem;font-size:.9rem}.loading-text{text-align:center;color:#666;font-style:italic}.balance-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem;max-height:300px;overflow-y:auto}.balance-item{padding:.75rem;border:1px solid #e0e0e0;border-radius:6px;background:rgba(255,255,255,.5);transition:border-color .3s ease}.balance-item:hover{border-color:#667eea;background:rgba(102,126,234,.05)}.balance-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.balance-amount{font-family:Courier New,monospace;font-weight:600;font-size:.9rem}.balance-amount.has-balance{color:#4caf50}.balance-amount.no-balance{color:#999}.balance-token-id{font-size:.75rem;color:#999;font-family:Courier New,monospace}.refresh-balance-btn{width:100%;margin-top:.5rem}.vault-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-shrink:0}.vault-controls .secondary-btn{padding:.5rem 1rem;font-size:.9rem}.vault-operations{min-height:auto!important;flex:none}.vault-operations .card{min-height:auto;flex:none}.icrc-ledger-status{margin:1rem 0;padding:1rem;background:rgba(255,255,255,.1);border-radius:8px;border:1px solid rgba(255,255,255,.2)}.status-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.status-item:last-child{border-bottom:none;margin-bottom:0}.status-label{font-weight:600;color:#555;font-size:.9rem}.status-value{font-family:Courier New,monospace;font-size:.85rem;padding:.25rem .5rem;border-radius:4px;background:rgba(255,255,255,.1)}.status-value.connected{color:#4caf50;background:rgba(76,175,80,.1);border:1px solid rgba(76,175,80,.3)}.status-value.disconnected{color:#f44336;background:rgba(244,67,54,.1);border:1px solid rgba(244,67,54,.3)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5;color:#333;background-color:#f5f5f5;margin:0;padding:20px}.container{max-width:1200px;margin:0 auto;padding:20px;background:white;border-radius:12px;box-shadow:0 2px 4px #0000001a}h1{color:#1a1a1a;text-align:center;margin-bottom:40px}h2{color:#2c3e50;margin-bottom:20px}section{background:#fff;padding:24px;border-radius:8px;margin-bottom:24px;box-shadow:0 1px 3px #0000001a}form{display:flex;flex-direction:column;gap:16px}div{display:flex;flex-direction:column;gap:8px}label{font-weight:500;color:#4a5568}input{padding:12px;border:1px solid #e2e8f0;border-radius:6px;font-size:16px;transition:border-color .2s}input:focus{outline:none;border-color:#4299e1;box-shadow:0 0 0 3px #4299e11a}button{background-color:#4299e1;color:#fff;padding:12px 24px;border:none;border-radius:6px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s}button:hover{background-color:#3182ce}button:disabled{background-color:#cbd5e0;cursor:not-allowed}.error{background-color:#fed7d7;color:#c53030;padding:12px;border-radius:6px;margin-bottom:16px}.success{background-color:#c6f6d5;color:#2f855a;padding:12px;border-radius:6px;margin-bottom:16px}.token-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px}.token-info p{margin:0;padding:12px;background:#f7fafc;border-radius:6px;font-weight:500}.transfer form,.vault form{max-width:400px}@media (max-width: 768px){body{padding:10px}.container{padding:16px}section{padding:16px}}img{max-width:50vw;max-height:25vw;display:block;margin:auto}#greeting{margin:10px auto;padding:10px 60px;border:1px solid #222}#greeting:empty{display:none}.browser-warning{display:none}