:root{--qan-purple:#8B5CF6;--qan-purple-light:#A855F7;--qan-purple-dark:#6D28D9;--qan-cyan:#06B6D4;--qan-cyan-light:#22D3EE;--qan-cyan-dark:#0891B2;--qan-green:#10B981;--qan-green-light:#34D399;--bg-dark:#000000;--card-bg:rgba(139,92,246,0.05);--card-border:rgba(139,92,246,0.2);--text-primary:#ffffff;--text-secondary:rgba(255,255,255,0.8);--text-muted:rgba(255,255,255,0.6);--glow-purple:0 0 20px rgba(139,92,246,0.5);--glow-cyan:0 0 20px rgba(6,182,212,0.5);--glow-combined:0 0 20px rgba(139,92,246,0.4),0 0 40px rgba(6,182,212,0.3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text-primary);background:var(--bg-dark);overflow-x:hidden;min-height:100vh}.animated-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg-dark)}#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;background:var(--bg-dark);display:block}.main-content{position:relative;z-index:1;min-height:100vh;padding:2rem 1rem;isolation:isolate}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.staking-header{text-align:center;padding:3rem 0 2rem;margin-bottom:2rem;overflow:visible}.staking-header h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;margin-bottom:1rem;line-height:1.3;padding:0.2em 0;overflow:visible;background:linear-gradient(135deg,var(--qan-purple),var(--qan-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 40px rgba(139,92,246,0.5)}.staking-header p{font-size:clamp(1rem,2vw,1.2rem);opacity:0.9;max-width:600px;margin:0 auto;line-height:1.6}.connect-section{display:flex;justify-content:flex-end;align-items:center;padding:1rem 0;position:relative;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none;z-index:10;margin-bottom:1.5rem}.btn-connect{background:linear-gradient(135deg,rgba(139,92,246,0.2),rgba(6,182,212,0.2));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(139,92,246,0.5);border-radius:12px;padding:12px 24px;color:white;font-weight:600;font-size:0.95rem;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 20px rgba(139,92,246,0.3);min-width:160px}.btn-connect:hover{background:linear-gradient(135deg,rgba(139,92,246,0.3),rgba(6,182,212,0.3));border-color:rgba(139,92,246,0.8);box-shadow:0 6px 30px rgba(139,92,246,0.5),0 0 40px rgba(6,182,212,0.3);transform:translateY(-2px)}.btn-connect:disabled{opacity:0.5;cursor:not-allowed;transform:none}.btn-connect.hidden{display:none}.connect-badge{background:rgba(139,92,246,0.15);border-color:rgba(139,92,246,0.4);font-variant-numeric:tabular-nums}.staking-card{background:var(--card-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--card-border);border-radius:20px;padding:2.5rem;margin-bottom:2rem;box-shadow:0 8px 32px rgba(0,0,0,0.3);transition:all 0.3s ease}.staking-card:hover{border-color:rgba(139,92,246,0.4);box-shadow:0 12px 40px rgba(139,92,246,0.2),0 0 30px rgba(6,182,212,0.15)}.staking-card h2{font-size:1.5rem;margin-bottom:1.5rem;background:linear-gradient(135deg,var(--qan-purple),var(--qan-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.info-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:1.5rem 1rem;text-align:center}.info-label{font-size:0.85rem;color:var(--text-muted);margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.5px}.info-value{font-size:1.2rem;font-weight:700;color:var(--text-primary);word-break:break-word;overflow-wrap:break-word;white-space:normal;line-height:1.4;hyphens:none}.info-value.highlight{background:linear-gradient(135deg,var(--qan-purple),var(--qan-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.input-group{margin-bottom:1.5rem}.input-group label{display:block;font-size:0.9rem;color:var(--text-secondary);margin-bottom:0.5rem;font-weight:500}.input-wrapper{display:flex;gap:0.5rem;align-items:stretch;flex-wrap:wrap}.input-amount{flex:1;padding:14px 18px;background:rgba(255,255,255,0.05);border:1px solid rgba(139,92,246,0.3);border-radius:12px;color:var(--text-primary);font-size:1.1rem;font-weight:600;outline:none;transition:all 0.3s ease}.input-amount:focus{border-color:var(--qan-purple);box-shadow:0 0 0 3px rgba(139,92,246,0.15)}.btn-max{background:rgba(139,92,246,0.2);border:1px solid rgba(139,92,246,0.4);border-radius:12px;padding:14px 20px;color:var(--qan-purple-light);font-weight:600;font-size:0.9rem;cursor:pointer;transition:all 0.3s ease;white-space:nowrap}.btn-max:hover{background:rgba(139,92,246,0.3);border-color:rgba(139,92,246,0.6)}.staking-info{margin-top:0.75rem;padding:0.75rem 1rem;background:rgba(139,92,246,0.05);border:1px solid rgba(139,92,246,0.2);border-radius:8px}.staking-info p{font-size:0.85rem;color:var(--text-secondary);line-height:1.5;margin:0}.btn-stake{width:100%;background:linear-gradient(135deg,rgba(139,92,246,0.3),rgba(6,182,212,0.3));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(139,92,246,0.6);border-radius:12px;padding:16px 32px;color:white;font-weight:700;font-size:1.1rem;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 20px rgba(139,92,246,0.4);text-transform:uppercase;letter-spacing:1px;margin-top:1rem}.btn-stake:hover:not(:disabled){background:linear-gradient(135deg,rgba(139,92,246,0.4),rgba(6,182,212,0.4));border-color:rgba(139,92,246,0.9);box-shadow:0 6px 30px rgba(139,92,246,0.6),0 0 40px rgba(6,182,212,0.4);transform:translateY(-2px)}.btn-stake:disabled{opacity:0.5;cursor:not-allowed;transform:none}.btn-withdraw{background:linear-gradient(135deg,rgba(239,68,68,0.3),rgba(239,68,68,0.2));border-color:rgba(239,68,68,0.6);box-shadow:0 4px 20px rgba(239,68,68,0.4)}.btn-withdraw:hover:not(:disabled){background:linear-gradient(135deg,rgba(239,68,68,0.4),rgba(239,68,68,0.3));border-color:rgba(239,68,68,0.9);box-shadow:0 6px 30px rgba(239,68,68,0.6)}.btn-withdraw-success{background:linear-gradient(135deg,rgba(16,185,129,0.3),rgba(16,185,129,0.2));border-color:rgba(16,185,129,0.6);box-shadow:0 4px 20px rgba(16,185,129,0.4)}.btn-withdraw-success:hover:not(:disabled){background:linear-gradient(135deg,rgba(16,185,129,0.4),rgba(16,185,129,0.3));border-color:rgba(16,185,129,0.9);box-shadow:0 6px 30px rgba(16,185,129,0.6)}.warning-box{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:12px;padding:1rem;margin:1.5rem 0}.warning-box p{font-size:0.9rem;color:#fca5a5;line-height:1.6;margin:0}.status-message{margin-top:1rem;padding:1rem;border-radius:12px;font-size:0.9rem;text-align:center}.status-message.info{background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.3);color:var(--qan-purple-light)}.status-message.success{background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.3);color:var(--qan-cyan-light)}.status-message.error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5}.status-message.hidden{display:none}@media (max-width:1024px){.container{padding:0 1.5rem}.staking-card{padding:2rem 1.5rem}.info-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}@media (max-width:768px){.container{padding:0 1rem}.main-content{padding:1rem 0.5rem}.staking-header{padding:1.5rem 0 1rem}.staking-header h1{font-size:clamp(1.5rem,6vw,2.5rem)}.staking-header p{font-size:clamp(0.9rem,3vw,1.1rem)}.staking-card{padding:1.5rem 1rem}.staking-card h2{font-size:1.25rem}.info-grid{grid-template-columns:repeat(2,1fr);gap:0.75rem}.info-card{padding:1rem 0.75rem}.info-label{font-size:0.75rem}.info-value{font-size:1rem;word-break:break-all}.input-group label{font-size:0.85rem}.input-wrapper{flex-direction:row;gap:0.5rem}.input-amount{padding:12px 14px;font-size:1rem;flex:1;min-width:0}.btn-max{padding:12px 16px;font-size:0.9rem;white-space:nowrap;flex-shrink:0}.btn-stake{padding:14px 24px;font-size:1rem}.connect-section{padding:0.75rem 1rem}.btn-connect{padding:10px 20px;font-size:0.9rem;min-width:140px}.status-message{padding:0.75rem;font-size:0.85rem}.warning-box{padding:0.75rem}.warning-box p{font-size:0.85rem}.staking-info{padding:0.5rem 0.75rem}.staking-info p{font-size:0.8rem}}@media (max-width:640px){.main-content{padding:0.5rem 0.25rem}.container{padding:0 0.75rem}.staking-header{padding:1rem 0 0.75rem}.staking-header h1{font-size:clamp(1.25rem,7vw,2rem)}.staking-card{padding:1rem 0.75rem}.staking-card h2{font-size:1.1rem;margin-bottom:1rem}.info-grid{grid-template-columns:1fr;gap:0.5rem}.info-card{padding:0.75rem}.info-label{font-size:0.7rem}.info-value{font-size:0.9rem}.input-group{margin-bottom:1rem}.input-group label{font-size:0.8rem}.input-wrapper{flex-direction:column}.input-amount{padding:10px 12px;font-size:0.95rem;width:100%}.btn-max{padding:10px;font-size:0.85rem;width:100%}.btn-stake{padding:12px 20px;font-size:0.95rem}.connect-section{padding:0.5rem}.btn-connect{width:100%;min-width:auto;padding:12px 16px}.status-message{padding:0.75rem;font-size:0.8rem}.warning-box{padding:0.75rem;margin:1rem 0}.warning-box p{font-size:0.8rem;line-height:1.5}.staking-info p{font-size:0.75rem}}@media (max-width:480px){.main-content{padding:0.5rem 0.15rem}.container{padding:0 0.5rem}.staking-header{padding:0.75rem 0 0.5rem}.staking-header h1{font-size:1.5rem;margin-bottom:0.5rem}.staking-header p{font-size:0.85rem}.staking-card{padding:0.75rem 0.5rem;border-radius:16px}.info-card{padding:0.5rem}.info-label{font-size:0.65rem;margin-bottom:0.25rem}.info-value{font-size:0.85rem}.input-amount{padding:10px;font-size:0.9rem}.btn-stake{padding:12px 16px;font-size:0.9rem;letter-spacing:0.5px}.connect-section{padding:0.5rem 0.25rem}.status-message{padding:0.5rem;font-size:0.75rem}}.hidden{display:none !important}.text-center{text-align:center}.mt-1{margin-top:0.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mb-1{margin-bottom:0.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn 0.3s ease}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.modal-content{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid var(--card-border);border-radius:20px;max-width:500px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px rgba(139,92,246,0.3);animation:slideUp 0.3s ease;overflow:hidden}@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{padding:1.5rem 2rem;border-bottom:1px solid var(--card-border);text-align:center}.modal-header h2{font-size:1.5rem;margin:0;background:linear-gradient(135deg,#fca5a5,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-body{padding:2rem}.modal-body p{color:var(--text-secondary);line-height:1.6;margin:0 0 1.5rem 0;font-size:1rem}.modal-warning-box{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.modal-warning-box p{color:#fca5a5;font-weight:600;margin-bottom:1rem}.modal-warning-box ul{color:var(--text-secondary);margin:0;padding-left:1.5rem;line-height:1.8}.modal-warning-box li{margin-bottom:0.5rem}.modal-question{color:var(--text-primary) !important;font-weight:600;text-align:center;margin-bottom:0 !important}.modal-footer{padding:1.5rem 2rem;border-top:1px solid var(--card-border);display:flex;gap:1rem;justify-content:flex-end}.btn-modal{padding:12px 24px;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;transition:all 0.3s ease;border:2px solid;min-width:140px}.btn-modal-cancel{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.2);color:var(--text-secondary)}.btn-modal-cancel:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.4);color:var(--text-primary)}.btn-modal-confirm{background:linear-gradient(135deg,rgba(239,68,68,0.3),rgba(239,68,68,0.2));border-color:rgba(239,68,68,0.6);color:#fca5a5;box-shadow:0 4px 20px rgba(239,68,68,0.4)}.btn-modal-confirm:hover{background:linear-gradient(135deg,rgba(239,68,68,0.4),rgba(239,68,68,0.3));border-color:rgba(239,68,68,0.9);box-shadow:0 6px 30px rgba(239,68,68,0.6);transform:translateY(-2px)}@media (max-width:640px){.modal-content{max-width:100%;margin:1rem}.modal-header{padding:1.25rem 1.5rem}.modal-header h2{font-size:1.25rem}.modal-body{padding:1.5rem}.modal-footer{padding:1.25rem 1.5rem;flex-direction:column}.btn-modal{width:100%;min-width:auto}}