:root{--phantom-purple: #ab9ff2;--phantom-purple-dark: #9485d8;--phantom-purple-light: #c5bbf8;--bg-page: #fafafa;--bg-surface: #ffffff;--bg-hover: #f5f5f5;--border-color: #e0e0e0;--text-primary: #1a1a1a;--text-secondary: #666666;--text-muted: #999999;--success: #4caf50;--error: #ff5252;--warning: #ffa726;--info: #29b6f6}[data-theme=dark]{--bg-page: #1a1a1a;--bg-surface: #2a2a2a;--bg-hover: #333333;--border-color: #3a3a3a;--text-primary: #ffffff;--text-secondary: #b0b0b0;--text-muted: #808080}:root{--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-xxl: 3rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;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}body{background:var(--bg-page);color:var(--text-primary);line-height:1.6;font-size:16px;transition:background-color var(--transition-normal),color var(--transition-normal)}#app{min-height:100vh;display:flex;flex-direction:column}header{padding:var(--spacing-xl) var(--spacing-lg);text-align:center;background:linear-gradient(180deg,rgba(171,159,242,.1) 0%,transparent 100%);border-bottom:1px solid var(--border-color);position:relative;display:flex;justify-content:center;align-items:center}.theme-toggle{position:absolute;right:var(--spacing-lg);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;width:40px;height:40px;transition:all var(--transition-fast)}.theme-toggle:hover{background:var(--bg-hover);border-color:var(--phantom-purple)}.theme-toggle:focus{outline:2px solid var(--phantom-purple);outline-offset:2px}.theme-toggle svg{width:20px;height:20px;fill:var(--text-primary)}.header-content h1{font-size:2rem;font-weight:700;color:var(--phantom-purple);margin-bottom:var(--spacing-xs)}.subtitle{color:var(--text-secondary);font-size:1rem}main{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl) var(--spacing-lg)}footer{padding:var(--spacing-xxl) var(--spacing-lg);text-align:center;border-top:1px solid var(--border-color);background:linear-gradient(0deg,rgba(171,159,242,.05) 0%,transparent 100%)}.footer-content{max-width:800px;margin:0 auto}.footer-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.footer-description{color:var(--text-secondary);font-size:.875rem;line-height:1.6;margin-bottom:var(--spacing-lg)}.footer-links{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.footer-links a{color:var(--phantom-purple);text-decoration:none;font-size:.875rem;font-weight:500;transition:color var(--transition-fast)}.footer-links a:hover{color:var(--phantom-purple-light);text-decoration:underline}.footer-links .separator{color:var(--border-color)}.connect-card,.account-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-xxl);max-width:500px;width:100%;box-shadow:0 4px 20px #0000001a;transition:transform var(--transition-normal),box-shadow var(--transition-normal),background-color var(--transition-normal)}[data-theme=dark] .connect-card,[data-theme=dark] .account-card{box-shadow:0 10px 40px #0000004d}.connect-card:hover,.account-card:hover{transform:translateY(-2px);box-shadow:0 15px 50px #ab9ff233}.connect-card h2,.account-card h2{font-size:1.75rem;margin-bottom:var(--spacing-lg);color:var(--text-primary);text-align:center}.connect-section{width:100%;display:flex;justify-content:center;align-items:center}.logo-container{display:flex;justify-content:center;margin-bottom:var(--spacing-lg)}.phantom-logo{width:80px;height:80px;filter:drop-shadow(0 4px 12px rgba(171,159,242,.3));animation:float 3s ease-in-out infinite;border-radius:var(--radius-md)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.demo-title{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md);text-align:center}.description{text-align:center;color:var(--text-secondary);margin-bottom:var(--spacing-lg);font-size:.95rem;line-height:1.6;max-width:90%;margin-left:auto;margin-right:auto}.provider-label{text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-md);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.connect-buttons{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%}.provider-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;border:1px solid var(--border-color);background:var(--bg-surface);color:var(--text-primary);transition:all var(--transition-fast)}.provider-btn:hover{background:var(--bg-hover);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}[data-theme=dark] .provider-btn:hover{box-shadow:0 4px 12px #0000004d}.provider-btn:active{transform:translateY(0)}.provider-btn:focus{outline:2px solid var(--phantom-purple);outline-offset:2px}.provider-btn svg{flex-shrink:0}.google-btn:hover{border-color:#4285f4;box-shadow:0 4px 12px #4285f44d}.apple-btn:hover{border-color:var(--text-primary);box-shadow:0 4px 12px #fff3}.account-section{width:100%;display:flex;justify-content:center;align-items:center}.info-section{margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.info-section:last-of-type{margin-bottom:var(--spacing-xl)}.info-label{display:block;font-size:.875rem;font-weight:600;color:var(--text-secondary);margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.05em}.info-content{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.address-text,.balance-text{font-size:1.125rem;font-weight:500;color:var(--text-primary);font-family:Monaco,Courier New,monospace}.address-row,.balance-row{background:var(--bg-page);padding:var(--spacing-md);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.address-row:hover,.balance-row:hover{background:var(--bg-hover)}button{cursor:pointer;border:none;font-family:inherit;font-weight:600;transition:all var(--transition-fast);outline:none}.primary-btn{width:100%;background:var(--phantom-purple);color:var(--text-primary);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);font-size:1rem;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);box-shadow:0 4px 12px #ab9ff24d}.primary-btn:hover{background:var(--phantom-purple-dark);transform:translateY(-2px);box-shadow:0 6px 20px #ab9ff266}.primary-btn:active{transform:translateY(0);box-shadow:0 2px 8px #ab9ff24d}.primary-btn:focus{outline:2px solid var(--phantom-purple-light);outline-offset:2px}.primary-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.secondary-btn{width:100%;background:transparent;color:var(--text-secondary);padding:var(--spacing-md) var(--spacing-xl);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:1rem}.secondary-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-muted)}.secondary-btn:focus{outline:2px solid var(--border-color);outline-offset:2px}.icon-btn{background:transparent;color:var(--text-secondary);padding:var(--spacing-sm);border-radius:var(--radius-sm);font-size:1.25rem;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.icon-btn:hover{background:var(--phantom-purple);color:var(--text-primary);transform:scale(1.1)}.icon-btn:active{transform:scale(.95)}.icon-btn:focus{outline:2px solid var(--phantom-purple);outline-offset:2px}.icon-btn.success{background:var(--success);color:var(--text-primary)}.error{color:var(--error);font-size:.875rem;margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:#ff52521a;border:1px solid var(--error);border-radius:var(--radius-sm);text-align:center}.success-message{position:fixed;top:var(--spacing-xl);right:var(--spacing-xl);background:var(--success);color:var(--text-primary);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);box-shadow:0 4px 12px #0000004d;animation:slideIn .3s ease,slideOut .3s ease 2.7s;z-index:1000}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(400px);opacity:0}}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#fafafaf2;display:flex;align-items:center;justify-content:center;z-index:9999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}[data-theme=dark] .loading-overlay{background:#1a1a1af2}.loading-content{text-align:center}.spinner{width:50px;height:50px;border:4px solid var(--border-color);border-top-color:var(--phantom-purple);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--spacing-md)}@keyframes spin{to{transform:rotate(360deg)}}.loading-content p{color:var(--text-secondary);font-size:1rem}.balance-text.loading:after{content:"...";animation:ellipsis 1.5s infinite}@keyframes ellipsis{0%{content:"."}33%{content:".."}66%{content:"..."}}.hidden{display:none!important}.disabled{opacity:.5;cursor:not-allowed!important;pointer-events:none}@media (max-width: 768px){header{padding:var(--spacing-lg) var(--spacing-md)}.theme-toggle{right:var(--spacing-md);width:36px;height:36px}.theme-toggle svg{width:18px;height:18px}.header-content h1{font-size:1.5rem}.subtitle{font-size:.875rem}.footer-links{flex-direction:column;gap:var(--spacing-sm)}.footer-links .separator{display:none}.connect-card,.account-card{padding:var(--spacing-xl);margin:var(--spacing-md)}.connect-card h2,.account-card h2,.demo-title{font-size:1.25rem}.description{font-size:.875rem}.phantom-logo{width:60px;height:60px}main{padding:var(--spacing-md)}.address-text,.balance-text{font-size:1rem}.success-message{top:var(--spacing-md);right:var(--spacing-md);left:var(--spacing-md)}}@media (max-width: 480px){.header-content h1{font-size:1.25rem}.connect-card,.account-card{padding:var(--spacing-lg)}.address-text,.balance-text{font-size:.875rem}.icon-btn{min-width:36px;min-height:36px;font-size:1rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*:focus-visible{outline:2px solid var(--phantom-purple);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.auth-callback-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-md)}.auth-state-card{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-xxl);max-width:500px;width:100%;text-align:center;box-shadow:0 4px 12px #0000000d;animation:fadeIn .3s ease}.auth-state-card .logo-container{display:flex;justify-content:center;margin-bottom:var(--spacing-lg)}.auth-state-card h2{font-size:1.75rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--text-primary)}.auth-message{font-size:1rem;color:var(--text-secondary);margin-bottom:var(--spacing-lg);line-height:1.6}.auth-message.error-text{color:var(--error)}.success-icon{display:flex;justify-content:center;margin-bottom:var(--spacing-lg)}.success-icon svg{color:var(--success);animation:scaleIn .5s ease}.error-icon{display:flex;justify-content:center;margin-bottom:var(--spacing-lg)}.error-icon svg{color:var(--error);animation:shake .5s ease}.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:.875rem 1.5rem;font-size:1rem;font-weight:500;color:#fff;background:var(--phantom-purple);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);box-shadow:0 2px 8px #ab9ff24d}.primary-btn:hover{background:var(--phantom-purple-dark);transform:translateY(-1px);box-shadow:0 4px 12px #ab9ff266}.primary-btn:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@media (max-width: 640px){.auth-state-card{padding:var(--spacing-xl)}.auth-state-card h2{font-size:1.5rem}.auth-message{font-size:.9375rem}.success-icon svg,.error-icon svg{width:48px;height:48px}}