.App{min-height:100vh;position:relative}.app-content{padding-top:60px;min-height:calc(100vh - 60px);position:relative}.content-wrapper{max-width:1400px;margin:0 auto;padding:var(--space-2xl) var(--space-xl) 0}.user-characters-section{padding:var(--space-xl) 0;border-bottom:1px solid var(--border)}.section-header{text-align:left}.section-title{font-size:2rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-sm);display:inline-block;background:linear-gradient(135deg,var(--text-primary) 0,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transform:translateZ(0);will-change:transform}@supports not (-webkit-background-clip:text){.section-title{background:none;color:var(--primary-light)}}@media (max-width:768px){.public-characters-section,.user-characters-section{margin-bottom:var(--space-sm)}.user-characters-section{padding:var(--space-lg) 0}.section-header{margin-bottom:var(--space-sm);padding:0 var(--space-md)}.section-title{font-size:1rem;margin-bottom:0;display:inline-block;background:linear-gradient(135deg,var(--text-primary) 0,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transform:translateZ(0)}}@media (max-width:480px){.section-header{margin-bottom:var(--space-sm)}.section-title{font-size:1.5rem;margin-bottom:var(--space-xs);display:inline-block;background:linear-gradient(135deg,var(--text-primary) 0,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transform:translateZ(0)}.public-characters-section,.user-characters-section{margin-bottom:var(--space-md)}.user-characters-section{padding:var(--space-md) 0}}.create-section{display:flex;justify-content:center;margin:0 0 var(--space-2xl) 0}.modern-btn{position:relative;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;padding:var(--space-lg) var(--space-2xl);border-radius:var(--radius-full);font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:var(--space-sm);box-shadow:var(--shadow-lg);transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.modern-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.modern-btn:hover:before{left:100%}.modern-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-2xl);background:linear-gradient(135deg,var(--primary-light),var(--primary))}.modern-btn:active{transform:translateY(-1px) scale(1.01)}.btn-icon{font-size:1.25rem;transition:transform .3s ease}.btn-text{position:relative}.btn-arrow{font-size:1.125rem;transition:transform .3s ease}.modern-btn:hover .btn-icon{transform:rotate(180deg)}.modern-btn:hover .btn-arrow{transform:translateX(4px)}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;padding:20px;color:white}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:768px){.content-wrapper{padding:var(--space-xl) var(--space-lg) 0}.modern-btn{padding:var(--space-md) var(--space-xl);font-size:1rem}}@media (max-width:480px){.content-wrapper{padding:var(--space-lg) var(--space-md) 0}.modern-btn{padding:var(--space-sm) var(--space-lg);font-size:.9rem}}