body {
            font-family: 'Almendra SC', serif;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            background-color: rgba(73, 73, 73, 0.0);
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            flex-direction: column;
            gap: 20px;
        }

        /* 
           1. CANVAS BOUNDS
           Locked to your 354x650px GitHub resource specifications.
        */
        .form-container {
            position: relative; 
            width: 354px;       
            height: 650px;      
            padding: 0;         
            box-sizing: border-box;
            
            background-image: url('../relacionamentos/fisicos.png');
            background-size: 100% 100%; 
            background-position: center;
            background-repeat: no-repeat;
        }

        /* 
           2. ABSOLUTE HITBOX COORDINATES
        */
        .absolute-field {
            position: absolute;
            box-sizing: border-box;
        
        }
        #people {
            top: 290px;       
            left: 100px;
            width: 200px;
            height: 42px;
        }
         #skill {
            top: 347px;       
            left: 85px;       
            width: 180px;      
            height: 42px;    
        }
        #devotion {
            top: 507px;       
            left: 145px;
            width: 180px;
            height: 22px;
        }
        #valor {
            top: 525px;       
            left: 70px;
            width: 240px;
            height: 22px;
        }
        #mais {
            top: 525px;       
            left: 25px;
            width: 40px;
            height: 22px;
        }
        #desvalor {
            top: 545px;       
            left: 70px;
            width: 240px;
            height: 22px;
        }
        #menos {
            top: 545px;       
            left: 25px;
            width: 40px;
            height: 22px;
        }
        #funcao {
            top: 567px;       
            left: 120px;
            width: 180px;
            height: 22px;
        }
        #evento {
            top: 585px;       
            left: 123px;
            width: 40px;
            height: 22px;
        }
        #aspecto {
            top: 604px;       
            left: 125px;
            width: 180px;
            height: 22px;
        }
        #nome {
            top: 280px;       
            left: 115px;
            width: 200px;
            height: 22px;
        }
        #ps {
            top: 110px;       
            left: 43px;
            width: 40px;
            height: 22px;
        }
        #fis {
            top: 83px;       
            left: 75px;
            width: 40px;
            height: 22px;
        }
        #int {
            top: 65px;       
            left: 115px;
            width: 40px;
            height: 22px;
        }
        #level {
            top: 60px;       
            left: 155px;
            width: 40px;
            height: 22px;
        }
        #soc {
            top: 65px;       
            left: 200px;
            width: 40px;
            height: 22px;
        }
        #mag {
            top: 80px;       
            left: 240px;
            width: 40px;
            height: 22px;
        }
         #pm {
            top: 110px;       
            left: 266px;
            width: 40px;
            height: 22px;
        }
        #place {
            top: 320px;       
            left: 115px;
            width: 200px;
            height: 22px;
        }
        #other {
            top: 390px;       
            left: 0px;
            width: 340px;
            height: 42px;
            text-align: center;
        }
        #other1 {
            top: 410px;       
            left: 0px;
            width: 340px;
            height: 42px;
            text-align: center;
        }
        #other2 {
            top: 430px;       
            left: 0px;
            width: 350px;
            height: 42px;
            text-align: center;
        }
        #other3 {
            top: 450px;       
            left: 0px;
            width: 340px;
            height: 42px;
            text-align: center;
        }
        #range {
            top: 575px;       
            left: 300px;
            width: 15px;
            height: 15px;
            accent-color: #333300;
        }
        #status {
            top: 565px;       
            left: 46px;
            width: 15px;
            height: 15px;
            accent-color: #333300;
        }
        #perfil {
            top: 17px;       
            left: 310px;
            width: 15px;
            height: 15px;
            accent-color: #333300;
        }

        /* 
           3. INVISIBLE TEXT OVERLAYS
        */
        .invisible-input {
            font-family: 'Almendra SC', serif;
            font-size: 16px;
            color: #333300;           
            width: 100%;
            height: 100%;
            border: none;
            background: transparent;  
            padding: 0 12px;
            box-sizing: border-box;
            outline: none;           
        }

        .invisible-input option {
            color: #333300;
            background-color: #ffffff; 
        }

        select.invisible-input {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
        }

        /* 
           4. EXTERNAL SUBMIT PANEL
           Placing this outside ensures zero footprint on your graphic canvas.
        */
        .control-panel {
            width: 354px;
            text-align: center;
        }

        #download-btn {
            font-family: 'Almendra SC', serif;
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            background-color: #666;
            color: white;
            box-shadow: 0 4px 12px rgba(73, 73, 73, 0.2);
            transition: transform 0.1s, background-color 0.2s;
            width: 100%;
        }

        #download-btn:hover {
            background-color: darkblue;
        }

        #download-btn:disabled {
            background-color: #999;
            cursor: not-allowed;
        }